lct

Your Name

2022-08-08 fe4005fe29aafa104485ffa2392598bd8dccd347

lct

 .env

@@ -5,4 +5,4 @@
VITE_OPEN = false

# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = /vue-next-admin-preview/
VITE_PUBLIC_PATH = 'http://121.239.169.27:6006'

 .env.development

@@ -2,6 +2,7 @@
ENV = 'development'

# 本地环境接口地址
#VITE_API_URL = 'http://192.168.0.35:8008'
VITE_API_URL = 'http://192.168.0.35:8008'
VITE_API_URL_OUT = 'http://192.168.0.35:8008'
#VITE_API_URL = 'http://192.168.0.29:8008'
VITE_API_URL = 'http://192.168.0.69:8008'
#VITE_API_URL = 'http://192.168.0.69:8008'

 .env.production

@@ -2,4 +2,5 @@
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = 'https://lyt-top.gitee.io/vue-next-admin-preview/'
VITE_API_URL = 'http://121.239.169.27:16008/safeplatform'
VITE_API_URL_OUT = 'http://121.239.169.27:16008/safeplatform-out'

 src/api/accidentManagementSystem/index.ts

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

export function accidentManagementSystemApi(){
    return {
        // 事故快报一览
        accidentList:(params:object)=>{
         return request({
             url:"/accidentExpress/page/list",
             method:"post",
             data:params
         })
        },
        // 事故快报新增
        accidentAdd:(params:object)=>{
            return request({
                url:"/accidentExpress/add",
                method:"post",
                data:params
            })
        },
        // 事故快报详情
        accidentScarh:(params:number)=>{
            return request({
               url:`/accidentExpress/info/${params}`,
               method:"get",
            })
        },
         // 事故快报修改
        accidentView:(params:object)=>{
            return request({
                url:"/accidentExpress/update",
                method:"post",
                data:params
            })
        },
         // 事故快报删除
         accidentDele:(params:object)=>{
             return request({
                url:`/accidentExpress/batchDelete`,
                method:"post",
                data:params
             })
         },
        //  工伤申报一览
        workList:(params:object)=>{
            return request({
                url:"/workInjuryDeclaration/page/list",
                method:"post",
                data:params
            })
        },
        // 工伤申报新增
        workAdd:(params:object)=>{
            return request({
                url:"/workInjuryDeclaration/add",
                method:"post",
                data:params
            })
        },
        // 工伤申报详情
        workScarh:(params:number)=>{
            return request({
               url:`/workInjuryDeclaration/info/${params}`,
               method:"get",
            })
        },
        // 工伤申报修改
        workView:(params:object)=>{
            return request({
                url:"/workInjuryDeclaration/update",
                method:"post",
                data:params
            })
        },
        // 工伤申报删除/批量删除
        workDelete:(params:object)=>{
            return request({
               url:`/workInjuryDeclaration/batchDelete`,
               method:"post",
                data:params
            })
        },
        // 伤亡人员一览
        casualtyList:(id:number)=>{
            return request({
                url:`/accidentExpress/casualty/list/${id}`,
                method:"get",
            })
        },
        // 伤亡人员新增
        casualtyAdd:(params:object)=>{
            return request({
                url:`/accidentExpress/casualty/add`,
                method:"post",
                data:params
            })
        },
        // 伤亡人员删除
        casualtyDel:(id:number)=>{
            return request({
                url:`/accidentExpress/casualty/del/${id}`,
                method:"get",
            })
        },
    }
}

 src/api/contingencyManagement/contingency/index.ts

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

export function contingencyApi(){
    return{
        //应急队伍一览
        getTeamManagementList: (params: object) => {
            return request({
                url: `/emergencyTeam/page/list`,
                method: 'post',
                data:params
            })
        },
        // 应急队伍新增
        addEmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyTeam/add`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍详情
        seeEmergencyTeam: (params:number) => {
            return request({
                url: `/emergencyTeam/info/${params}`,
                method: 'get'
            });
        },
        // 应急队伍编辑
        editEmergencyTeam: (params: object) => {
            return request({
                url: `/emergencyTeam/update`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍删除
        deleteEmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyTeam/batchDelete`,
                method: 'post',
                data:params
            });
        },
        // 应急队伍人员一览
        getEmergencyTeamPersonnelList: (params: number) => {
            return request({
                url: `/emergencyTeam/memberList/${params}`,
                method: 'get',
                // data:params
            })
        },
        // 应急队伍人员新增
        addEmergencyTeamPersonnel: (params:object) => {
            return request({
                url: `/emergencyTeam/addMember`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍人员详情
        seeEmergencyTeamPersonnel: (params:number) => {
            return request({
                url: `/emergencyTeam/infoMember/${params}`,
                method: 'get'
            });
        },
        // 应急队伍人员编辑
        editEmergencyTeamPersonnel: (params: object) => {
            return request({
                url: `/emergencyTeam/updateMember`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍人员删除
        deleteEmergencyTeamPersonnel: (params:object) => {
            return request({
                url: `/emergencyTeam/deleteMember/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/contingencyManagement/emergencyDrillEvaluation/index.ts

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

export function emergencyDrillEvaluationApi(){
    return{
        // 应急演练实施评价一览
        getEmergencyDrillEvaluationList: (params: object) => {
            return request({
                url: '/emergencyDrillEvaluation/page/list',
                method: 'post',
                data:params
            })
        },
        // 应急演练实施评价新增
        addEmergencyDrillEvaluation: (params:object) => {
            return request({
                url: `/emergencyDrillEvaluation/add`,
                method: 'post',
                data: params
            });
        },
        // 应急演练实施评价详情
        seeEmergencyDrillEvaluation: (params:number) => {
            return request({
                url: `/emergencyDrillEvaluation/info/${params}`,
                method: 'get'
            });
        },
        // 应急演练实施评价编辑
        editEmergencyDrillEvaluation: (params: object) => {
            return request({
                url: `/emergencyDrillEvaluation/update`,
                method: 'post',
                data: params
            });
        },
        // 应急演练实施评价删除
        deleteEmergencyDrillEvaluation: (params:object) => {
            return request({
                url: `/emergencyDrillEvaluation/batchDelete`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/contingencyManagement/emergencyDrillExecute/index.ts

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

export function emergencyDrillExecuteApi(){
    return{
        // 应急演练实施一览
        getEmergencyDrillExecuteList: (params: object) => {
            return request({
                url: '/emergencyDrillExecute/page/list',
                method: 'post',
                data:params
            })
        },
        // 应急演练实施新增
        addEmergencyDrillExecute: (params:object) => {
            return request({
                url: `/emergencyDrillExecute/add`,
                method: 'post',
                data: params
            });
        },
        // 应急演练实施详情
        seeEmergencyDrillExecute: (params:number) => {
            return request({
                url: `/emergencyDrillExecute/info/${params}`,
                method: 'get'
            });
        },
        // 应急演练实施编辑
        editEmergencyDrillExecute: (params: object) => {
            return request({
                url: `/emergencyDrillExecute/update`,
                method: 'post',
                data: params
            });
        },
        // 应急演练实施删除
        deleteEmergencyDrillExecute: (params:any) => {
            return request({
                url: `/emergencyDrillExecute/batchDelete`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/contingencyManagement/emergencyDrillPlan/index.ts

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

export function releaseDrillPlanApi(){
    return{
        //演练计划发布一览
        getReleaseDrillPlanList: (params: object) => {
            return request({
                url: '/emergencyDrillPlan/page/list',
                method: 'post',
                data:params
            })
        },
        // 演练计划发布新增
        addReleaseDrillPlan: (params:object) => {
            return request({
                url: `/emergencyDrillPlan/add`,
                method: 'post',
                data: params
            });
        },
        // 演练计划发布详情
        seeReleaseDrillPlan: (params:number) => {
            return request({
                url: `/emergencyDrillPlan/info/${params}`,
                method: 'get'
            });
        },
        // 演练计划发布编辑
        editReleaseDrillPlan: (params: object) => {
            return request({
                url: `/emergencyDrillPlan/update`,
                method: 'post',
                data: params
            });
        },
        // 演练计划发布删除
        deleteReleaseDrillPlan: (params:object) => {
            return request({
                url: `/emergencyDrillPlan/batchDelete`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/contingencyManagement/emergencyMaterialsInspection/index.ts

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

export function emergencyMaterialsInspectionApi(){
    return{
        //应急物资检查一览
        getEmergencyMaterialsInspectionList: (params: object) => {
            return request({
                url: '/emergencySuppliesInspect/page/list',
                method: 'post',
                data:params
            })
        },
        // 应急物资检查新增
        addEmergencyMaterialsInspection: (params:object) => {
            return request({
                url: `/emergencySuppliesInspect/add`,
                method: 'post',
                data: params
            });
        },
        // 应急物资检查详情
        seeEmergencyMaterialsInspection: (params:number) => {
            return request({
                url: `/emergencySuppliesInspect/info/${params}`,
                method: 'get'
            });
        },
        // 应急物资检查编辑
        editEmergencyMaterialsInspection: (params: object) => {
            return request({
                url: `/emergencySuppliesInspect/update`,
                method: 'post',
                data: params
            });
        },
        // 应急物资检查删除
        deleteEmergencyMaterialsInspection: (params:object) => {
            return request({
                url: `/emergencySuppliesInspect/batchDelete`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/contingencyManagement/emergencyPlan/index.ts

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

export function emergencyPlanApi(){
    return{
        // 应急预案管理一览
        getEmergencyPlanList: (params: object) => {
            return request({
                url: '/emergencyPlan/page/list',
                method: 'post',
                data:params
            })
        },
        // 应急预案管理新增
        addEmergencyPlan: (params: object) => {
            return request({
                url: `/emergencyPlan/add`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍详情
        seeEmergencyTeam: (params:number) => {
            return request({
                url: `/emergencyPlan/info/${params}`,
                method: 'get'
            });
        },
        // 应急队伍编辑
        editEmergencyTeam: (params: object) => {
            return request({
                url: `/emergencyPlan/update`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍删除
        deleteEmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyPlan/batchDelete`,
                method: 'post',
                data: params
            });
        },
        // 应急队伍废止
        EmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyPlan/updateAbolish?id=${params}&abolishStatus=true`,
                method: 'get',
            });
        },
        // 应急队伍还原
        reductionEmergencyTeam: (params:number) => {
            return request({
                url: `/emergencyPlan/updateAbolish?id=${params}&abolishStatus=false`,
                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
            });
        },
        // 审批一览
        processEmergencyPlan: (params: object) => {
            return request({
                url: `/emergencyWorkApprove/page/list`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/contingencyManagement/emergencyPlanLog/index.ts

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

export function emergencyPlanLogApi(){
    return{
        // 应急预案启动记录一览
        getEmergencyPlanLogList: (params: object) => {
            return request({
                url: '/emergencyPlanLog/page/list',
                method: 'post',
                data:params
            })
        },
        // 应急预案启动记录新增
        addEmergencyPlanLog:(params:object)=>{
            return request({
                url:"/emergencyPlanLog/add",
                method:"post",
                data:params
            })
        },
        // 应急预案启动记录详情
        seeEmergencyPlanLog:(params:number)=>{
            return request({
                url:`/emergencyPlanLog/info/${params}`,
                method:"get",
            })
        },
        // 应急预案启动记录修改
        editEmergencyPlanLog:(params:object)=>{
            return request({
                url:"/emergencyPlanLog/update",
                method:"post",
                data:params
            })
        },
        // 应急预案启动记录删除
        deleteEmergencyPlanLog:(params:object)=>{
            return request({
                url:`/emergencyPlanLog/batchDelete`,
                method:"post",
                data:params
            })
        },
    }
}

 src/api/contingencyManagement/emergencyResources/index.ts

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

export function emergencySuppliesApi(){
    return{
        // 应急物资一览
        getEmergencySuppliesList:(params:object)=>{
            return request({
                url:"/emergencySupplies/page/list",
                method:'post',
                data:params,
            });
        },
        // 应急物资新增
        addEmergencySupplies:(params:object)=>{
            return request({
                url:"/emergencySupplies/add",
                method:"post",
                data:params
            })
        },
        // 应急物资详情
        seeEmergencySupplies: (params:number) => {
            return request({
                url: `/emergencySupplies/info/${params}`,
                method: 'get'
            });
        },
        // 应急物资编辑
        editEmergencySupplies: (params: object) => {
            return request({
                url: `/emergencySupplies/update`,
                method: 'post',
                data: params
            });
        },
        // 应急物资删除
        deleteEmergencySupplies: (params:object) => {
            return request({
                url: `/emergencySupplies/batchDelete`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/contingencyManagement/maintenanceEmergencyMaterials/index.ts

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

export function maintenanceEmergencyMaterialsApi(){
    return{
        //应急物资保养一览
        getMaintenanceEmergencyMaterialsList: (params: object) => {
            return request({
                url: '/emergencySuppliesMaintain/page/list',
                method: 'post',
                data:params
            })
        },
        // 应急物资保养新增
        addMaintenanceEmergencyMaterials: (params:object) => {
            return request({
                url: `/emergencySuppliesMaintain/add`,
                method: 'post',
                data: params
            });
        },
        // 应急物资保养详情
        seeMaintenanceEmergencyMaterials: (params:number) => {
            return request({
                url: `/emergencySuppliesMaintain/info/${params}`,
                method: 'get'
            });
        },
        // 应急物资保养编辑
        editMaintenanceEmergencyMaterials: (params: object) => {
            return request({
                url: `/emergencySuppliesMaintain/update`,
                method: 'post',
                data: params
            });
        },
        // 应急物资保养删除
        deleteMaintenanceEmergencyMaterials: (params:object) => {
            return request({
                url: `/emergencySuppliesMaintain/batchDelete`,
                method: 'post',
                data: params
            });
        },
    }
}

 src/api/facilityManagement/index.ts

对比新文件
@@ -0,0 +1,104 @@
import request from '/@/utils/request';
export function facilityManagementApi(){
    return{
        // 设备设施类型管理 查询单条数据
        getequipmentTypeMngDetail:(params:any)=>{
            return request({
                url:`/equipmentTypeMng/selectOne/${params}`,
                method:"get"
            })
        },
        // 设备设施类型管理 新增或者修改数据
        getequipmentTypeMngAddOrUpdate:(params:object)=>{
            return request({
                url:"/equipmentTypeMng/addOrUpdate",
                method:"post",
                data:params
            })
        },
         // 设备设施类型管理 删除 
         getequipmentTypeMngDelete:(params:any)=>{
            return request({
                url:`/equipmentTypeMng/delete`,
                method:"post",
                data:params
            })
        },
         // 设备设施类型管理 查询树状数据 
         getequipmentTypeMngTreeData:()=>{
            return request({
                url:`/equipmentTypeMng/treeData`,
                method:"get"
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 查询单条数据
        getequipmentInfoDetail:(params:any)=>{
            return request({
                url:`/equipmentInfo/selectOne/${params}`,
                method:"get"
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 新增或者修改数据
        getequipmentInfoAddOrUpdate:(params:object)=>{
            return request({
                url:"/equipmentInfo/addOrUpdate",
                method:"post",
                data:params
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 删除 
        getequipmentInfoDelete:(params:any)=>{
            return request({
                url:`/equipmentInfo/delete`,
                method:"post",
                data:params
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 分页查询数据
        getequipmentInfoList:(params:object)=>{
            return request({
                url:"/equipmentInfo/page/list",
                method:"post",
                data:params
            })
        },
         // 仪器仪表信息、生产设备设施、安全设备设施 统计
         getequipmentInfoStatistics:()=>{
            return request({
                url:`/equipmentInfo/statistics`,
                method:"get"
            })
        },
        // 重点监管装置/设备 查询单条数据
        getkeypointEquipmentInfoDetail:(params:any)=>{
            return request({
                url:`/keypointEquipmentInfo/selectOne/${params}`,
                method:"get"
            })
        },
        // 重点监管装置/设备 新增或者修改数据
        getkeypointEquipmentInfoAddOrUpdate:(params:object)=>{
            return request({
                url:`/keypointEquipmentInfo/addOrUpdate`,
                method:"post",
                data:params
            })
        },
        // 重点监管装置/设备 删除
        getkeypointEquipmentInfoDetele:(params:any)=>{
            return request({
                url:`/keypointEquipmentInfo/delete`,
                method:"post",
                data:params
            })
        },
         // 重点监管装置/设备 分页查询数据
         getkeypointEquipmentInfoAddOrList:(params:object)=>{
            return request({
                url:`/keypointEquipmentInfo/page/list`,
                method:"post",
                data:params
            })
        },
    }
}

 src/api/goalManagement/index.ts

对比新文件
@@ -0,0 +1,276 @@

import request from '/@/utils/request';
export function goalManagementApi() {
    return {
        // 目标设置、目标指标分解列表
        getTargetMngList: (params: object) => {
            return request({
                url: "/targetMng/page/list",
                method: "post",
                data: params
            })
        },
        // 目标设置详情
        getTargetMngDetail: (params: any) => {
            return request({
                url: `/targetMng/selectOne/${params}`,
                method: "get",
            })
        },
        // 目标设置新增或者修改数据
        getTargetMngAddOrupdata: (params: object) => {
            return request({
                url: "/targetMng/addOrUpdate",
                method: "post",
                data: params
            })
        },
        // 目标设置删除
        getTargetMngDelete: (params: any) => {
            return request({
                url: `/targetMng/delete`,
                method: "post",
                data:params
            })
        },
        // 目标指标分解-新增或者修改数据
        gettargetDivideDetail: (params: object) => {
            return request({
                url: "/targetDivideDetail/addOrUpdate",
                method: "post",
                data: params
            })
        },
        // 统计
        getEquipmentInfo: () => {
            return request({
                url: "/equipmentInfo/statistics",
                method: "get"
            })
        },
        // 目标责任书 分页查询数据
        gettargetDutyfileInfoList: (params: object) => {
            return request({
                url: "/targetDutyfileInfo/page/list",
                method: "post",
                data: params
            })
        },
        // 目标责任书 查询单条数据
        gettargetDutyfileInfoDetail: (params: number) => {
            return request({
                url: `/targetDutyfileInfo/selectOne/${params}`,
                method: "get"
            })
        },
        // 目标责任书 新增或者修改数据 
        gettargetDutyfileInfoAddorUpdata: (params: any) => {
            return request({
                url: `/targetDutyfileInfo/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        // 目标责任书 删除
        gettargetDutyfileInfoDelete: (params: any) => {
            return request({
                url: `/targetDutyfileInfo/delete`,
                method: "post",
                data:params
            })
        },
        // 奖惩标准设定 分页查询数据
        getrewardPunishmentStandardList: (params: object) => {
            return request({
                url: "/rewardPunishmentStandard/page/list",
                method: "post",
                data: params
            })
        },
        // 奖惩标准设定 查询单条数据 
        getrewardPunishmentStandardDetail: (params: any) => {
            return request({
                url: `/rewardPunishmentStandard/selectOne/${params}`,
                method: "get",
            })
        },
        // 奖惩标准设定 新增或者修改数据
        getrewardPunishmentStandardaddOrUpdate: (params: object) => {
            return request({
                url: "/rewardPunishmentStandard/addOrUpdate",
                method: "post",
                data: params
            })
        },
        // 奖惩标准设定 删除 
        getrewardPunishmentStandardDelete: (params: any) => {
            return request({
                url: `/rewardPunishmentStandard/delete`,
                method: "post",
                data:params
            })
        },
        // 奖惩记录 分页查询数据
        getrewardPunishmentList: (params: object) => {
            return request({
                url: "/rewardPunishmentDetail/page/list",
                method: "post",
                data: params
            })
        },
        // 奖惩记录 查询单条数据 
        getrewardPunishmentDetail: (params: any) => {
            return request({
                url: `/rewardPunishmentDetail/selectOne/${params}`,
                method: "get",
            })
        },
        // 奖惩记录 新增或者修改数据
        getrewardPunishmentAddOrUpdate: (params: object) => {
            return request({
                url: `/rewardPunishmentDetail/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        // 奖惩记录 删除 
        getrewardPunishmentDelete: (params: any) => {
            return request({
                url: `/rewardPunishmentDetail/delete`,
                method: "post",
                data:params
            })
        },
        // 绩效考核管理 安全考核管理 分页查询数据
        getexamineMngList: (params: object) => {
            return request({
                url: "/examineMng/page/list",
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 安全考核管理 查询单条数据 
        getexamineMngDetail: (params: any) => {
            return request({
                url: `/examineMng/selectOne/${params}`,
                method: "get",
            })
        },
        //  绩效考核管理 安全考核管理 新增或者修改数据
        getexamineMngAddOrUpdate: (params: object) => {
            return request({
                url: `/examineMng/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 安全考核管理 删除 
        getexamineMngDelete: (params: any) => {
            return request({
                url: `/examineMng/delete`,
                method: "post",
                data:params
            })
        },
        // 绩效考核管理 考核标准设定 分页查询数据
        getexamineTemplateList: (params: object) => {
            return request({
                url: "/examineTemplate/page/list",
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 考核标准设定 查询单条数据 
        getexamineTemplateDetail: (params: any) => {
            return request({
                url: `/examineTemplate/selectOne/${params}`,
                method: "get",
            })
        },
        //  绩效考核管理 考核标准设定 新增或者修改数据
        getexamineTemplateAddOrUpdate: (params: object) => {
            return request({
                url: `/examineTemplate/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 考核标准设定 删除 
        getexamineTemplateDelete: (params: any) => {
            return request({
                url: `/examineTemplate/delete`,
                method: "post",
                data:params
            })
        },
        // 目标汇总 分页查询数据
        gettargetDutySummaryList: (params: object) => {
            return request({
                url: "/targetDutySummary/page/list",
                method: "post",
                data: params
            })
        },
        //  目标汇总 查询单条数据 
        gettargetDutySummaryDetail: (params: any) => {
            return request({
                url: `/targetDutySummary/selectOne/${params}`,
                method: "get",
            })
        },
        //  目标汇总 新增或者修改数据
        gettargetDutySummaryAddOrUpdate: (params: object) => {
            return request({
                url: `/targetDutySummary/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        //  目标汇总 删除 
        gettargetDutySummaryDelete: (params: any) => {
            return request({
                url: `/targetDutySummary/delete?ids=${params}`,
                method: "get",
            })
        },
        // 安全目标考核 查询单条数据
        gettargetExamineDetail: (params: any) => {
            return request({
                url: `/targetExamine/selectOne/${params}`,
                method: "get"
            })
        },
        // 安全目标考核 新增或者修改数据
        gettargetExamineAddOrUpdate: (params: object) => {
            return request({
                url: "/targetExamine/addOrUpdate",
                method: "post",
                data: params
            })
        },
        //   目标检查上报 (有疑问) 新增或者修改数据 ---???
        getworkApproveAddOrUpdate: (params: object) => {
            return request({
                url: "/workApprove/submitApprove",
                method: "post",
                data: params
            })
        },
        // 部门树
        getTreedepartment: () => {
            return request({
                    url:"/department/list",
                    method: "post"
                })

        },
        // 人员
        getManName:(params:any)=>{
            return request({
                url:`/account/dep/list?depId=${params}`,
                method:"get"
            })
        }

    }
}

 src/api/login/index.ts

@@ -10,7 +10,7 @@
        // v1
        signIn: (params: object) => {
            return request({
                url: '/auth/login',
                url: import.meta.env.VITE_API_URL + '/auth/login',
                method: 'post',
                data: params
            });
@@ -18,7 +18,7 @@
        // v1
        signOut: () => {
            return request({
                url: '/auth/logout',
                url: import.meta.env.VITE_API_URL + '/auth/logout',
                method: 'post'
            });
        }

 src/api/systemManage/basicDateManage/personShiftManage/holidayTime/index.ts

 src/api/systemManage/basicDateManage/personShiftManage/holidayTimeGroup/index.ts

 src/api/systemManage/basicDateManage/personShiftManage/teamManage/index.ts

 src/api/systemManage/basicDateManage/personShiftManage/teamStrategy/index.ts

 src/api/systemManage/basicDateManage/personShiftManage/timeStrategy/index.ts

 src/api/systemManage/basicDateManage/personShiftManage/workingHours/index.ts

 src/api/systemManage/basicDateManage/personShiftManage/workingHoursSet/index.ts

 src/api/systemManage/department/index.ts

@@ -5,14 +5,14 @@
        // v2
        getDepartmentList: () => {
            return request({
                url: `/department/list`,
                url: import.meta.env.VITE_API_URL + `/department/list`,
                method: 'post'
            });
        },
        // v2
        addDepartment: (data: object) => {
            return request({
                url: `/department/add`,
                url: import.meta.env.VITE_API_URL + `/department/add`,
                method: 'post',
                data: data
            });
@@ -20,7 +20,7 @@
        // v2
        modDepartment: (data: object) => {
            return request({
                url: `/department/mod`,
                url: import.meta.env.VITE_API_URL + `/department/mod`,
                method: 'post',
                data: data
            });
@@ -28,10 +28,10 @@
        // v1
        deleteDepartment: (value?: object) => {
            return request({
                url: `/department/del`,
                url: import.meta.env.VITE_API_URL + `/department/del`,
                method: 'post',
                data: value
            });
        },
        }
    };
}

 src/api/systemManage/menu/index.ts

@@ -11,14 +11,14 @@
        // v2
        getMenuAdmin: (value?: string) => {
            return request({
                url: `/auth/menu?projectId= ${value}`,
                url: import.meta.env.VITE_API_URL + `/auth/menu?projectId= ${value}`,
                method: 'post'
            });
        },
        // v1
        addMenu: (value?: object) => {
            return request({
                url: `/menu/add`,
                url: import.meta.env.VITE_API_URL + `/menu/add`,
                method: 'post',
                data: value
            });
@@ -26,7 +26,7 @@
        // v1
        modMenu: (value?: object) => {
            return request({
                url: `/menu/mod`,
                url: import.meta.env.VITE_API_URL + `/menu/mod`,
                method: 'post',
                data: value
            });
@@ -34,7 +34,7 @@
        // v1
        deleteMenu: (value?: object) => {
            return request({
                url: `/menu/del`,
                url: import.meta.env.VITE_API_URL + `/menu/del`,
                method: 'post',
                data: value
            });
@@ -42,7 +42,7 @@
        // v1
        getProjectList: () => {
            return request({
                url: `/project/list`,
                url: import.meta.env.VITE_API_URL + `/project/list`,
                method: 'post'
            });
        }

 src/api/systemManage/personShiftManage/holidayTime/index.ts

 src/api/systemManage/personShiftManage/holidayTimeGroup/index.ts

 src/api/systemManage/personShiftManage/teamManage/index.ts

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

export function teamManageApi() {
    return {
        //班组分页列表
        getRecordPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/page/list`,
                method: 'post',
                data: data
            });
        },

        //班组列表
        getRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/list`,
                method: 'post',
                data: data
            });
        },

        //班组-班组成员分页列表
        getAllRecordPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/member/page/list`,
                method: 'post',
                data: data
            });
        },

        //所有部门列表
        getAllDepartment: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/department/list`,
                method: 'post'
            });
        },

        //用户-部门所有用户
        getAllMember: (data: number) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/dep/list?depId=${data}`,
                method: 'get',
                data: data
            });
        },

        // 班组-班组成员列表
        getAllRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/member/list`,
                method: 'get',
                data: data
            });
        },

        // 班组新增
        addRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/add`,
                method: 'post',
                data: data
            });
        },

        // 班组修改
        updateRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/mod`,
                method: 'post',
                data: data
            });
        },

        // 班组删除
        deleteRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/group/del`,
                method: 'post',
                data: data
            });
        }

        // 时间策略批量删除
        // deletBatchRecord: (data: object)=>{
        //     return request({
        //         url: `/timeStrategy/deleteBatchTimeStrategy`,
        //         method: 'post',
        //         data: data
        //     })
        // },
    };
}

 src/api/systemManage/personShiftManage/teamStrategy/index.ts

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

export function teamStrategyApi() {
    return {
        //获取班组策略分页列表
        getRecordPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/groupStrategy/page/list`,
                method: 'post',
                data: data
            });
        },

        // 班组策略新增
        addRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/groupStrategy/add`,
                method: 'post',
                data: data
            });
        },

        // 班组策略修改
        updateRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/groupStrategy/mod`,
                method: 'post',
                data: data
            });
        },

        // 班组策略删除
        deleteRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/schedule/groupStrategy/del`,
                method: 'post',
                data: data
            });
        }

        // 时间策略批量删除
        // deletBatchRecord: (data: object)=>{
        //     return request({
        //         url: `/timeStrategy/deleteBatchTimeStrategy`,
        //         method: 'post',
        //         data: data
        //     })
        // },
    };
}

 src/api/systemManage/personShiftManage/timeStrategy/index.ts

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

export function timeStrategyApi() {
    return {
        //获取工作时间组列表
        getWorkTimeList: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/getWorkTimeGroup`,
                method: 'get'
            });
        },

        //获取休息时间组列表
        getRestTimeList: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/breakTime/getAllBreakTimeGroup`,
                method: 'get'
            });
        },

        //时间策略分页列表
        getRecordPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/getAllTimeStrategyByPage`,
                method: 'post',
                data: data
            });
        },

        // 时间策略全部列表
        getAllRecord: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/getAllTimeStrategy`,
                method: 'get'
            });
        },

        //根据id获取时间策略列表
        getRecordById: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/getTimeStrategyById`,
                method: 'post',
                data: data
            });
        },

        // 时间策略新增
        addRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/addTimeStrategy`,
                method: 'post',
                data: data
            });
        },

        // 时间策略修改
        updateRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/updateTimeStrategy`,
                method: 'post',
                data: data
            });
        },

        // 时间策略删除
        deleteRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/deleteTimeStrategy`,
                method: 'post',
                data: data
            });
        },

        // 时间策略批量删除
        deletBatchRecord: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/timeStrategy/deleteBatchTimeStrategy`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/systemManage/personShiftManage/workingHours/index.ts

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

export function workingHoursApi() {
    return {
        // 获取工作时间段列表
        getWorkTimePeriod: (value: { name: string }) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/getWorkTimePeriod`,
                method: 'get'
            });
        },

        //工作时间段分页列表
        postPeriodPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/getWorkTimePeriodByPage?pageSiz`,
                method: 'post',
                data: data
            });
        },

        // 新增工作时间段
        postWorkTimePeriod: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/addWorkTimePeriod`,
                method: 'post',
                data: data
            });
        },

        // 修改工作时间段
        updateWorkTimePeriod: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/updateWorkTimePeriod`,
                method: 'post',
                data: data
            });
        },

        // 删除工作时间段
        deletWorkTimePeriod: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/deletWorkTimePeriod`,
                method: 'post',
                data: data
            });
        },

        // 批量删除
        deleteBatchWorkTimePeriod: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/deleteBatchWorkTimePeriod`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/systemManage/personShiftManage/workingHoursSet/index.ts

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

export function workingHoursSetApi() {
    return {
        //工作时间组分页列表
        postWorkTimeGroupPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/getWorkTimeGroupByPage`,
                method: 'post',
                data: data
            });
        },

        // 工作时间组新增
        addWorkTimeGroup: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/addWorkTimeGroup`,
                method: 'post',
                data: data
            });
        },

        // 工作时间组修改
        updateWorkTimeGroup: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/updateWorkTimeGroup`,
                method: 'post',
                data: data
            });
        },

        // 工作时间组删除
        deleteWorkTimeGroup: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/deleteWorkTimeGroup`,
                method: 'post',
                data: data
            });
        },

        // 工作时间组批量删除
        deletBatchWorkTimeGroup: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/workTime/deletBatchWorkTimeGroup`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/systemManage/role/index.ts

@@ -5,14 +5,14 @@
        // v2
        getRoleList: () => {
            return request({
                url: `/role/list`,
                url: import.meta.env.VITE_API_URL + `/role/list`,
                method: 'post'
            });
        },
        // v2
        addRole: (data: object) => {
            return request({
                url: `/role/add`,
                url: import.meta.env.VITE_API_URL + `/role/add`,
                method: 'post',
                data: data
            });
@@ -20,7 +20,7 @@
        // v2
        modRole: (data: object) => {
            return request({
                url: `/role/mod`,
                url: import.meta.env.VITE_API_URL + `/role/mod`,
                method: 'post',
                data: data
            });
@@ -28,10 +28,10 @@
        // v2
        deleteRole: (value?: object) => {
            return request({
                url: `/role/del`,
                url: import.meta.env.VITE_API_URL + `/role/del`,
                method: 'post',
                data: value
            });
        },
        }
    };
}

 src/api/systemManage/user/index.ts

@@ -5,7 +5,7 @@
        // v1
        getUserList: (data: any) => {
            return request({
                url: `/account/page/list`,
                url: import.meta.env.VITE_API_URL + `/account/page/list`,
                method: 'post',
                data: data
            });
@@ -13,7 +13,7 @@
        // v1
        addUser: (data: object) => {
            return request({
                url: `/account/add`,
                url: import.meta.env.VITE_API_URL + `/account/add`,
                method: 'post',
                data: data
            });
@@ -21,7 +21,7 @@
        // v1
        modUser: (data: object) => {
            return request({
                url: `/account/mod`,
                url: import.meta.env.VITE_API_URL + `/account/mod`,
                method: 'post',
                data: data
            });
@@ -29,7 +29,7 @@
        // v1
        getUserLByDepartment: (depId: number | null) => {
            return request({
                url: `/account/dep/list?depId=${depId == null ? '' : depId}`,
                url: import.meta.env.VITE_API_URL + `/account/dep/list?depId=${depId == null ? '' : depId}`,
                method: 'get'
            });
        }

 src/api/workInjuryDeclaration/index.ts

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

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

        // 事故报告一览
        getAccidentReportList: (params: object) => {
            return request({
                url: '/accidentReport/page/list',
                method: 'post',
                data:params
            })
        },
        // 事故报告新增
        addAccidentReport: (params: object) => {
            return request({
                url: `/accidentReport/add`,
                method: 'post',
                data: params
            });
        },
        // 事故报告详情
        seeAccidentReport: (params:number) => {
            return request({
                url: `/accidentReport/info/${params}`,
                method: 'get'
            });
        },
        // 事故报告编辑
        editAccidentReport: (params: object) => {
            return request({
                url: `/accidentReport/update`,
                method: 'post',
                data: params
            });
        },
        // 事故报告删除
        deleteAccidentReport: (params:object) => {
            return request({
                url: `/accidentReport/batchDelete`,
                method: 'post',
                data:params
            });
        },

        //  工伤申报一览
        workList:(params:object)=>{
            return request({
                url:"/workInjuryDeclaration/page/list",
                method:"post",
                data:params
            })
        },
        // 工伤申报新增
        workAdd:(params:object)=>{
            return request({
                url:"/workInjuryDeclaration/add",
                method:"post",
                data:params
            })
        },
        // 工伤申报详情
        seeAccidentManagementSystem:(params:number)=>{
            return request({
                url:`workInjuryDeclaration/info/${params}`,
                method:"get",
            })
        },
        // 工伤申报修改
        workView:(params:object)=>{
            return request({
                url:"/workInjuryDeclaration/update",
                method:"post",
                data:params
            })
        },
        // 工伤申报删除/批量删除
        workDelete:(params:object)=>{
            return request({
                url:`/workInjuryDeclaration/batchDelete/${params}`,
                method:"get",
            })
        },
    }
}

 src/assets/index.css

对比新文件
@@ -0,0 +1,10 @@
.pot {
    position: absolute;
    top: 19px;
    right: 40px;
    border: none !important;
    padding: 0;
}
.pot:focus,.pot:hover{
  background-color: #fff !important;
}

 src/assets/index.ts

对比新文件
@@ -0,0 +1,17 @@
export function timeDate(row: any, column: any, cellValue: any, index: any) {
    const daterc = row[column.property]
    if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
}

 src/components/DailogSearch/DailogSearch.vue

对比新文件
@@ -0,0 +1,193 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="选择安全目标指标" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.searchParams.qName" placeholder="安全目标指标" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.searchParams.indexNum" placeholder="目标指标编号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item>
                                <el-button type="primary" @click="listApi">查询</el-button>
                                <el-button @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="qName" label="安全目标指标" width="180" />
                    <el-table-column align="center" prop="indexNum" label="目标指标编号" width="180" />
                    <el-table-column align="center" prop="year" label="年度" />
                    <el-table-column align="center" prop="value" label="指标值" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="7">
                <div v-if="dynamicTags[0]==''?false:true">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.qName }}
                </el-tag>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup(props,{emit}) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = (type:any) => {
            dialogVisible.value = true;
            ruleForm.searchParams.targetType=type
            listApi();
        };
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '', ////指标类型 1:年指标 2:月指标
                divideStatus: '2', ////分解状态 1:已分解 2:未分解
            },
        });
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        onMounted(() => {
        });

        const handleSizeChange = (val: number) => {
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const radio = (data: any) => {
            dynamicTags.value[0] = data;
        };
        const clear=()=>{
            dynamicTags.value=['']
            radio1.value=""
        }
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        const submitForm=()=>{
            let obj=JSON.parse(JSON.stringify(dynamicTags.value))
            emit("backNum",obj[0])
            dialogVisible.value = false
        }
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            currentPage4,
            total,
            pageSize4,
            resetForm,
            listApi,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            radio1,
            radio,
            full,
            toggleFullscreen,
            Delete,
            FullScreen,
            clear,
            submitForm
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/DailogSearchUser/index.vue

对比新文件
@@ -0,0 +1,237 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="用户选择" width="60%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="6">
                <div class="userTree">
                    <el-input v-model="filterText" placeholder="请输入组织机构过滤"></el-input>
                    <div class="tree">
                        <el-tree ref="treeRef" :data="data" :props="propse" @node-click="handleNodeClick" :filter-node-method="filterNode" />
                    </div>
                </div>
            </el-col>
            <el-col :span="14" style="padding: 20px">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="10" :offset="1">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="登录名" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" >查询</el-button>
                                <el-button size="default">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" v-if="types==0"/>
                    <el-table-column align="center"  v-if="types!=0">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.uid" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="realName" label="登录名" />
                    <el-table-column align="center" prop="username" label="用户名" />
                    <el-table-column align="center" prop="address" label="所属机构" />
                    <el-table-column align="center" prop="address" label="所属部门" />
                    <el-table-column align="center" prop="type" label="状态" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="4">
            <div v-if="dynamicTags[0]==''?false:true">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.realName }}
                </el-tag>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, watch } from 'vue';
import { FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElTree, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
interface Tree {
    label: string;
    children?: Tree[];
}
export default defineComponent({
    setup(props, { emit }) {
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        //部门树查询
        const filterText = ref('');
        const treeRef = ref<InstanceType<typeof ElTree>>();
        watch(filterText, (val) => {
            treeRef.value!.filter(val);
        });
        const filterNode = (depName: string, data: Tree) => {
            if (!depName) return true;
            return data.depName.includes(depName);
        };
        onMounted(() => {
            department();
        });
        //左边树形部分点击获取回调
        const names = ref<any>();
        const handleNodeClick = (data: Tree) => {
            goalManagementApi()
                .getManName(data.depId)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value=res.data.data
                        total.value=tableData.value.length
                    }else{
                        ElMessage.error(res.data.msg);
                    }
                });
        };

        const data = ref();
        //中间表格
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = ref();
        const currentPage4 = ref(1);
        const pageSize4 = ref(10);
        const total=ref()
        const handleSizeChange = (val: number) => {
            // console.log(`${val} items per page`);
            pageSize4.value=val
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            currentPage4.value=val
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: any) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const radio = (data: any) => {
            dynamicTags.value[0] = data;
        };
        const handleSelectionChange = (val:any) => {
             dynamicTags.value=val
}
        const types=ref()
        // 开启弹窗
        const dialogVisible = ref(false);
        const openDailog = (type:any) => {
            types.value=type
            dialogVisible.value = true;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        const submitForm = () => {
            if(types.value==0){
                emit('SearchUser', dynamicTags.value,types.value);
            }else {
                emit('SearchUser', dynamicTags.value[0],types.value);
            }

            dialogVisible.value = false;
        };
        return {
            total,
            types,
            filterText,
            treeRef,
            filterNode,
            propse,
            dialogVisible,
            names,
            data,
            handleNodeClick,
            openDailog,
            ruleForm,
            tableData,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            handleSelectionChange,
            radio1,
            dynamicTags,
            handleClose,
            FullScreen,
            full,
            toggleFullscreen,
            radio,
            submitForm,
        };
    },
});
</script>
<style scoped>
.userTree {
    border: 1px solid #ebeef5;
}
.userTree .el-input {
    padding: 10px;
    border-bottom: 1px solid #ebeef5;
}
.tree {
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
}
</style>

 src/components/DailogSearchUserManger/index.vue

对比新文件
@@ -0,0 +1,223 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="用户选择" width="60%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="6">
                <div class="userTree">
                    <el-input v-model="filterText" placeholder="请输入组织机构过滤"></el-input>
                    <div class="tree">
                        <el-tree ref="treeRef" :data="data" :props="propse" @node-click="handleNodeClick" :filter-node-method="filterNode" />
                    </div>
                </div>
            </el-col>
            <el-col :span="14" style="padding: 20px">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="10" :offset="1">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="登录名" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" >查询</el-button>
                                <el-button size="default">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.uid" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="realName" label="登录名" />
                    <el-table-column align="center" prop="username" label="用户名" />
                    <el-table-column align="center" prop="address" label="所属机构" />
                    <el-table-column align="center" prop="address" label="所属部门" />
                    <el-table-column align="center" prop="type" label="状态" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="4">
            <div v-if="dynamicTags[0]==''?false:true">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.realName }}
                </el-tag>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, watch } from 'vue';
import { FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElTree, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
interface Tree {
    label: string;
    children?: Tree[];
}
export default defineComponent({
    setup(props, { emit }) {
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        //部门树查询
        const filterText = ref('');
        const treeRef = ref<InstanceType<typeof ElTree>>();
        watch(filterText, (val) => {
            treeRef.value!.filter(val);
        });
        const filterNode = (depName: string, data: Tree) => {
            if (!depName) return true;
            return data.depName.includes(depName);
        };
        onMounted(() => {
            department();
        });
        //左边树形部分点击获取回调
        const names = ref<any>();
        const handleNodeClick = (data: Tree) => {
            goalManagementApi()
                .getManName(data.depId)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value=res.data.data
                    }else{
                        ElMessage.error(res.data.msg);
                    }
                });
        };

        const data = ref();
        //中间表格
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: any) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        const types=ref()
        // 开启弹窗
        const dialogVisible = ref(false);
        const openDailog = (type:any) => {
            console.log(type)
            types.value=type
            dialogVisible.value = true;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        const submitForm = () => {
            emit('SearchUser', dynamicTags.value);
            dialogVisible.value = false;
        };
        return {
            types,
            filterText,
            treeRef,
            filterNode,
            propse,
            dialogVisible,
            names,
            data,
            handleNodeClick,
            openDailog,
            ruleForm,
            tableData,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            radio1,
            dynamicTags,
            handleClose,
            FullScreen,
            full,
            toggleFullscreen,
            radio,
            submitForm,
        };
    },
});
</script>
<style scoped>
.userTree {
    border: 1px solid #ebeef5;
}
.userTree .el-input {
    padding: 10px;
    border-bottom: 1px solid #ebeef5;
}
.tree {
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
}
</style>

 src/components/checkTemplate/index.vue

对比新文件
@@ -0,0 +1,239 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择检查模板" width="900px" draggable :fullscreen="full">
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :inline="true" status-icon>
              <el-form-item>
                <el-input size="default" v-model="listQuery.searchParams.id" placeholder="id"  style="max-width: 215px;"/>
              </el-form-item>
              <el-form-item>
                <el-input size="default" v-model="listQuery.searchParams.teamName" placeholder="队伍名称"  style="max-width: 215px;padding: 0 12px;"/>
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" @click="onSubmit">查询</el-button>
                <el-button size="default" @click="submitReset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px;" @click="submitReset">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            ref="multipleTableRef"
            style="width: 100%;margin-top:20px"
            @cell-click="radio"
        >
          <el-table-column width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="id" />
          <el-table-column align="center" prop="teamName" label="队伍名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :span="6" style="padding-left: 15px">
        <div v-if="dynamicTags[0] == '' ? false : true">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag.teamName }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  onMounted,
} from 'vue';
import {
  Delete,
  FullScreen
} from '@element-plus/icons-vue';
import {
  ElMessage,
} from 'element-plus';
import {contingencyApi} from "/@/api/contingency";

export default defineComponent({
  setup(props, { emit }) {
    const dialogVisible = ref<boolean>(false);
    const openDailog = () => {
      dialogVisible.value = true;
      onSubmit();
    };
    // 搜索条件
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        teamName: "",
        id: "",
      }
    });
    // 列表数据请求
    const onSubmit = async () => {
      let res = await contingencyApi().getTeamManagementList(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 submitForm = () => {
      let obj = JSON.parse(JSON.stringify(dynamicTags.value));
      emit('SearchUser', obj[0]);
      dialogVisible.value = false;
    };
    // 重置
    const submitReset = () => {
      listQuery.searchParams.teamName = '';
      listQuery.searchParams.id = '';
      radio1.value=""
      dynamicTags.value[0]=""
      onSubmit();
    };
    // 表格
    const tableData = ref();
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      onSubmit();
    };
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      onSubmit();
    }
    // 右方点击添加后显示标签
    const dynamicTags = ref(['']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value = '';
    };
    const radio1 = ref('');
    const radio = (event: any) => {
      dynamicTags.value[0] = event;
    };
    onMounted(() => {
      onSubmit();
    });
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      dialogVisible,
      openDailog,
      tableData,
      pageSize,
      pageIndex,
      handleSizeChange,
      handleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      toggleFullscreen,
      FullScreen,
      full,
      onSubmit,
      listQuery,
      submitReset,
      total,
      radio,
      radio1,
      submitForm,

    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
  .pages{
    /*display: flex;*/
    /*justify-content: flex-end;*/
    margin-top: 15px;
  }
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/components/emergencySupplies/index.vue

对比新文件
@@ -0,0 +1,215 @@
<template>
  <el-dialog
      v-model="dialogVisible"
      title="选择应急物资"
      width="900px"
      draggable
      :fullscreen="full"
  >
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
            <el-form-item>
              <el-input size="default" v-model="listQuery.searchParams.name" placeholder="物资名称"  style="max-width: 215px;margin-right: 12px;"/>
            </el-form-item>
            <el-form-item>
              <el-button size="default" type="primary" @click="onSubmit">查询</el-button>
              <el-button size="default" @click="submitReset">重置</el-button>
              <el-button size="default" :icon="Delete">清除选择</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
          <el-table-column width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="物资名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div v-if="dynamicTags[0] == '' ? false : true">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  ref
} from 'vue';
import {
  Delete,
  FullScreen
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import {emergencySuppliesApi} from "/@/api/emergencyResources";
export default defineComponent({
  setup(props, { emit }) {
    const dialogVisible = ref<boolean>(false);
    const openDailog = () => {
      dialogVisible.value = true;
      onSubmit()
    };
    // 搜索条件
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams:{
        name: '',
      }
    });
    // 定义表格数据
    const tableData = ref([]);
    // 列表请求数据
    const onSubmit = async () => {
      let res = await emergencySuppliesApi().getEmergencySuppliesList(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 = '';
      onSubmit();
    };
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };
    // 右方点击添加后显示标签
    const dynamicTags = ref(['']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value = '';
    };
    const radio1 = ref('');
    const radio = (event: any) => {
      dynamicTags.value[0] = event;
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    const submitForm = () => {
      let obj = JSON.parse(JSON.stringify(dynamicTags.value));
      emit('SearchUser', obj[0]);
      dialogVisible.value = false;
    };
    return {
      dialogVisible,
      openDailog,
      listQuery,
      onSubmit,
      tableData,
      submitReset,
      handleSizeChange,
      handleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      toggleFullscreen,
      FullScreen,
      full,
      pageIndex,
      pageSize,
      radio1,
      radio,
      submitForm,
      total,
    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages{
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/components/equipmentDailog/Dailog.vue

对比新文件
@@ -0,0 +1,1003 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :before-close="resetForm" draggable :title="titles" width="60%">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px" class="formType">
            <el-form-item label="装置设施名称" size="default">
                <el-input v-model="form.qName" placeholder="请填写装置设施名称" />
            </el-form-item>
            <el-form-item label="装置设施位号" size="default">
                <el-input v-model="form.positionNum" placeholder="请填写装置设施位号" />
            </el-form-item>
            <el-form-item label="装置设施用途" size="default">
                <el-input v-model="form.qUsage" placeholder="请填写装置设施用途" />
            </el-form-item>
            <el-form-item label="装置设施型号" size="default">
                <el-input v-model="form.model" placeholder="请填写装置设施型号" />
            </el-form-item>
            <el-form-item label="类型/类别外键" size="default">
                <el-input v-model="form.equipmentTypeId" placeholder="请选择">
                    <template #append>
                        <el-button :icon="Search" @click="opencategory"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="区域名称" size="default">
                <el-input v-model="form.name" placeholder="请选择">
                    <template #append>
                        <el-button :icon="Search" @click="openRegion"></el-button>
                    </template>
                </el-input>
            </el-form-item> -->
            <el-form-item label="单位部门" size="default">
                <el-tree-select v-model="form.departmentId" :data="data" check-strictly="true" class="w100" :props="propse" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="设置部位" size="default">
                <el-input v-model="form.setPart" placeholder="请填写设置部位" />
            </el-form-item>
            <el-form-item label="生产日期" size="default">
                <el-date-picker v-model="form.produceTime" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="使用期限(天)" size="default">
                <el-input v-model="form.useEndDay" placeholder="请填写使用期限" />
            </el-form-item>
            <el-form-item label="生命周期" size="default">
                <el-select v-model="form.lifeCycle" placeholder="请选择" style="width: 100%">
                    <el-option label="已投用" value="1" />
                    <el-option label="库存中" value="2" />
                    <el-option label="报废" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="投用日期" size="default">
                <el-date-picker v-model="form.useDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="维修状态" size="default">
                <el-select v-model="form.repairStatus" placeholder="请选择" style="width: 100%">
                    <el-option label="维修中" value="1" />
                    <el-option label="已修好" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="停用状态" size="default">
                <el-select v-model="form.stopStatus" placeholder="请选择" style="width: 100%">
                    <el-option label="停用" value="1" />
                    <el-option label="在用" value="2" />
                    <el-option label="维修" value="3" />
                    <el-option label="报废" value="4" />
                </el-select>
            </el-form-item>
            <el-form-item label="上次检查日期" size="default">
                <el-date-picker
                    v-model="form.previousCheckDate"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="上次检测日期" size="default">
                <el-date-picker v-model="form.previousTestDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="上次保养日期" size="default">
                <el-date-picker
                    v-model="form.previousTakecareDate"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="下次检查日期" size="default">
                <el-date-picker v-model="form.nextCheckDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="下次检测日期" size="default">
                <el-date-picker v-model="form.nextTestDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="下次保养日期" size="default">
                <el-date-picker v-model="form.nextTakecareDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="负责人" size="default">
                <el-input v-model="form.leadingPersonId" placeholder="请选择">
                    <template #append>
                        <el-button :icon="Search" @click="openUser(0)"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="负责人部门" size="default">
                <el-tree-select
                    v-model="form.leadingPersonDepartmentId"
                    :data="data"
                    check-strictly="true"
                    class="w100"
                    :props="propse"
                    placeholder="请选择"
                />
            </el-form-item>
            <el-form-item label="供应商" size="default">
                <el-input v-model="form.supplyName" placeholder="请填写供应商" />
            </el-form-item>
            <el-form-item label="使用说明" size="default">
                <el-input v-model="form.useMemo" placeholder="请填写使用说明" />
            </el-form-item>
            <el-form-item label="是否检查" size="default">
                <el-select v-model="form.isNeedCheck" placeholder="请选择" style="width: 100%">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="检查周期" size="default">
                <el-input v-model="form.checkCycle" placeholder="请填写检查周期" />
            </el-form-item>
            <el-form-item label="检查提前提醒" size="default">
                <el-input v-model="form.checkWarn" placeholder="请填写检查提前提醒" />
            </el-form-item>
            <el-form-item label="是否检测" size="default">
                <el-select v-model="form.isNeedTest" placeholder="请选择" style="width: 100%">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="检测周期" size="default">
                <el-input v-model="form.testCycle" placeholder="请填写检测周期" />
            </el-form-item>
            <el-form-item label="检测提前提醒" size="default">
                <el-input v-model="form.testWarn" placeholder="请填写检测提前提醒" />
            </el-form-item>
            <el-form-item label="是否保养" size="default">
                <el-select v-model="form.isNeedTakecare" placeholder="请选择" style="width: 100%">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="检查内容" size="default">
                <el-input v-model="form.checkContent" placeholder="请填写检查内容" />
            </el-form-item>
            <el-form-item label="负责部门" size="default">
                <el-tree-select v-model="form.leadingDepartmentId" :data="data" check-strictly="true" class="w100" :props="propse" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="检查指标" size="default">
                <el-input v-model="form.checkPoint" placeholder="请填写检查指标" />
            </el-form-item>
            <el-form-item label="预警值" size="default">
                <el-input v-model="form.alertNum" placeholder="请填写预警值" />
            </el-form-item>
            <el-form-item label="联锁值" size="default">
                <el-input v-model="form.lockNum" placeholder="请填写联锁值" />
            </el-form-item>
            <el-form-item label="停用理由" size="default">
                <el-input v-model="form.stopReason" placeholder="请填写停用理由" />
            </el-form-item>
            <el-form-item label="停用后措施" size="default">
                <el-input v-model="form.afterStopStep" placeholder="请填写停用后措施" />
            </el-form-item>
            <el-form-item label="实际停用日期" size="default">
                <el-date-picker v-model="form.actualStopDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="停用提交人" size="default">
                <el-input v-model="form.stopSubmitPersonId" placeholder="请选择">
                    <template #append>
                        <el-button :icon="Search" @click="openUser(1)"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="停用提交日期" size="default">
                <el-date-picker v-model="form.stopSubmitDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="恢复理由" size="default">
                <el-input v-model="form.recoveryReason" placeholder="请填写恢复理由" />
            </el-form-item>
            <el-form-item label="恢复填报日期" size="default">
                <el-date-picker
                    v-model="form.recoverySubmitDate"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="实际恢复日期" size="default">
                <el-date-picker
                    v-model="form.actualRecoveryDate"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="报废理由" size="default">
                <el-input v-model="form.destoryReason" placeholder="请填写报废理由" />
            </el-form-item>
            <el-form-item label="报废填报日期" size="default">
                <el-date-picker
                    v-model="form.destorySubmitDate"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="实际报废日期" size="default">
                <el-date-picker
                    v-model="form.actualDestoryDate"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                />
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="设备保养" name="first">
                <el-button type="primary" size="default" @click="openMaintenance('新增', '')">新增</el-button>
                <el-table :data="form.takecareDetailList" style="width: 100%">
                    <el-table-column align="center" prop="takecareMemo" label="保养情况" />
                    <el-table-column align="center" prop="leadingPersonId" label="保养负责人" />
                    <el-table-column align="center" prop="takecareDate" :formatter="timeDate" label="保养日期" />
                    <el-table-column align="center" prop="leadingPersonDepartmentId" label="保养负责人单位" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openMaintenance('查看', scope.row)" size="small">查看</el-button>
                            <el-button link type="primary" @click="openMaintenance('修改', scope.row)" size="small">修改</el-button>
                            <el-button link type="primary" @click="deleteA(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="设备检测" name="second">
                <el-button type="primary" size="default" @click="openDetect('新增', '')">新增</el-button>
                <el-table :data="form.testDetailList" style="width: 100%">
                    <el-table-column align="center" prop="testPersonId" label="检测人" />
                    <el-table-column align="center" prop="testDate" :formatter="timeDate" label="检测日期" />
                    <el-table-column align="center" prop="testPersonDepartmentId" label="检测人单位" />
                    <el-table-column align="center" prop="testMemo" label="检测内容" />
                    <el-table-column align="center" prop="testResult" label="检测结果" />
                    <el-table-column align="center" prop="testStatus" label="检测状态" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openDetect('查看', scope.row)" size="small">查看</el-button>
                            <el-button link type="primary" @click="openDetect('修改', scope.row)" size="small">修改</el-button>
                            <el-button link type="primary" @click="deleteB(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="设备维修" name="third">
                <el-button type="primary" size="default" @click="openRepair('新增', '')">新增</el-button>
                <el-table :data="form.repaireDetailList" style="width: 100%">
                    <el-table-column align="center" prop="exceptionInfo" label="设施异常项" />
                    <el-table-column align="center" prop="repairStatus" label="维修状态" />
                    <el-table-column align="center" prop="repairMemo" label="维修情况" />
                    <el-table-column align="center" prop="repairPersonId" label="维修负责人" />
                    <el-table-column align="center" prop="repairPersonDepartmentId" label="维修负责人单位" />
                    <el-table-column align="center" prop="repairStartDate" :formatter="timeDate" label="维修开始日期" />
                    <el-table-column align="center" prop="repairEndDate" :formatter="timeDate" label="维修结束日期" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openRepair('查看', scope.row)" size="small">查看</el-button>
                            <el-button link type="primary" @click="openRepair('修改', scope.row)" size="small">修改</el-button>
                            <el-button link type="primary" @click="deleteC(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="检查标准设置" name="fourth">
                <el-button type="primary" size="default" @click="openStandard('新增', '')">新增</el-button>
                <el-table :data="form.checkStandardeDetailList" style="width: 100%">
                    <el-table-column align="center" prop="indexNum" label="序号" width="75" />
                    <el-table-column align="center" prop="checkContent" label="检查内容" />
                    <el-table-column align="center" prop="checkTarget" label="检查指标" />
                    <el-table-column align="center" prop="unit" label="单位" />
                    <el-table-column align="center" prop="checkPart" label="巡检部位" />
                    <el-table-column align="center" prop="rate" label="频次" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openStandard('查看', scope.row)" size="small">查看</el-button>
                            <el-button link type="primary" @click="openStandard('修改', scope.row)" size="small">修改</el-button>
                            <el-button link type="primary" @click="deleteD(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="巡检记录" size="default" name="five">
                <el-table :data="name" style="width: 100%">
                    <el-table-column align="center" type="selection" width="75" />
                    <el-table-column align="center" sortable prop="name" label="任务编号" />
                    <el-table-column align="center" sortable prop="address" label="任务名称" />
                    <el-table-column align="center" sortable prop="address" label="点位类型" />
                    <el-table-column align="center" sortable prop="address" label="检查频次" />
                    <el-table-column align="center" sortable prop="address" :formatter="timeDate" label="巡检时间" />
                    <el-table-column align="center" sortable prop="address" label="巡检人" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="保养维修标准" name="six" v-if="Dailogtype">
                <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :limit="3"
                    :on-exceed="handleExceed"
                >
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip"></div>
                    </template>
                </el-upload>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm">关闭</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <categoryDailog ref="categoryShow"></categoryDailog>
    <regionDailog ref="regionShow"></regionDailog>
    <DailogSearchUser ref="UserShow" @SearchUser="userId"></DailogSearchUser>
    <maintenanceDailog ref="maintenanceShow" @onMain="main"></maintenanceDailog>
    <detectDailog ref="detectShow" @onDelect="delect"></detectDailog>
    <repairDailog ref="repairShow" @onRepair="Repair"></repairDailog>
    <standardDailog ref="standardShow" @onStand="Stand"></standardDailog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import categoryDailog from './categoryDailog.vue';
import regionDailog from './regionDailog.vue';
import maintenanceDailog from './maintenanceDailog.vue';
import detectDailog from './detectDailog.vue';
import repairDailog from './repairDailog.vue';
import {timeDate} from '/@/assets/index.ts'
import standardDailog from './standardDailog.vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { goalManagementApi } from '/@/api/goalManagement';
import { number } from 'echarts';
export default defineComponent({
    components: { categoryDailog, regionDailog, DailogSearchUser, maintenanceDailog, detectDailog, repairDailog, standardDailog },
    setup(props, { emit }) {
        const dialogVisible = ref(false);
        const form = ref({
            supplyName: '',

            nextTestDate: '',

            qUsage: '',

            departmentId: '',

            produceTime: '',

            actualStopDate: '',

            takecareDetailList: [],

            infoType: '',

            leadingDepartmentId: '',

            useEndDay: '',

            previousTakecareDate: '',

            previousCheckDate: '',

            model: '',

            stopStatus: '',

            testWarn: '',

            stopSubmitDate: '',

            repairStatus: '',

            takecareStardardeDetailList: [
                {
                    filePath: '123',
                },
            ],

            nextCheckDate: '',

            checkCycle: '',

            checkPoint: '',

            leadingPersonId: '',

            qName: '',

            nextTakecareDate: '',

            setPart: '',

            checkStandardeDetailList: [],

            actualDestoryDate: '',

            isNeedTest: '',

            alertNum: '',

            checkContent: '',

            useMemo: '',

            previousTestDate: '',

            isNeedTakecare: '',

            destoryReason: '',

            checkDetailList: [],

            positionNum: '',

            testCycle: '',

            recoveryReason: '',

            isNeedCheck: '',

            actualRecoveryDate: '',

            leadingPersonDepartmentId: '',

            stopReason: '',

            destorySubmitDate: '',

            testDetailList: [],

            checkWarn: '',

            repaireDetailList: [],

            equipmentTypeId: 1,

            useDate: '',

            recoverySubmitDate: '',

            lockNum: '',

            stopSubmitPersonId: '',

            afterStopStep: '',

            lifeCycle: '',

            delCheckStandardeDetails: '',

            delTakecareStardardeDetails: '',

            delTakecareDetails: '',

            delRepaireDetails: '',

            delTestDetails: '',
        });
        const titles = ref();
        const disabled = ref(false);
        const Dailogtype = ref(false);
        const openDailog = (title: string, type: boolean, id: number, num: any) => {
            dialogVisible.value = true;
            department();
            Dailogtype.value = type;
            if (num == 0) {
                titles.value = `${title}仪表信息`;
                form.value.infoType = num;
            } else if (num == 1) {
                titles.value = `${title}设备设施`;
                form.value.infoType = num;
            } else if (num == 2) {
                titles.value = `${title}设备设施`;
                form.value.infoType = num;
            }

            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改')
                facilityManagementApi()
                    .getequipmentInfoDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 提交
        const submitForm = () => {
            form.value.delTakecareDetails = deleteAId.value.toString();
            form.value.delTestDetails = deleteBId.value.toString();
            form.value.delRepaireDetails = deleteCId.value.toString();
            form.value.delCheckStandardeDetails = deleteDId.value.toString();
            dialogVisible.value = false;
            facilityManagementApi()
                .getequipmentInfoAddOrUpdate(form.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('navAddorUpdata');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                supplyName: '',

                nextTestDate: '',

                qUsage: '',

                departmentId: '',

                produceTime: '',

                actualStopDate: '',

                takecareDetailList: [],

                infoType: '',

                leadingDepartmentId: '',

                useEndDay: '',

                previousTakecareDate: '',

                previousCheckDate: '',

                model: '',

                stopStatus: '',

                testWarn: '',

                stopSubmitDate: '',

                repairStatus: '',

                takecareStardardeDetailList: [
                    {
                        filePath: '123',
                    },
                ],

                nextCheckDate: '',

                checkCycle: '',

                checkPoint: '',

                leadingPersonId: '',

                qName: '',

                nextTakecareDate: '',

                setPart: '',

                checkStandardeDetailList: [],

                actualDestoryDate: '',

                isNeedTest: '',

                alertNum: '',

                checkContent: '',

                useMemo: '',

                previousTestDate: '',

                isNeedTakecare: '',

                destoryReason: '',

                checkDetailList: [],

                positionNum: '',

                testCycle: '',

                recoveryReason: '',

                isNeedCheck: '',

                actualRecoveryDate: '',

                leadingPersonDepartmentId: '',

                stopReason: '',

                destorySubmitDate: '',

                testDetailList: [],

                checkWarn: '',

                repaireDetailList: [],

                equipmentTypeId: 1,

                useDate: '',

                recoverySubmitDate: '',

                lockNum: '',

                stopSubmitPersonId: '',

                afterStopStep: '',

                lifeCycle: '',

                delCheckStandardeDetails: '',

                delTakecareStardardeDetails: '',

                delTakecareDetails: '',

                delRepaireDetails: '',

                delTestDetails: '',
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                supplyName: '',

                nextTestDate: '',

                qUsage: '',

                departmentId: '',

                produceTime: '',

                actualStopDate: '',

                takecareDetailList: [],

                infoType: '',

                leadingDepartmentId: '',

                useEndDay: '',

                previousTakecareDate: '',

                previousCheckDate: '',

                model: '',

                stopStatus: '',

                testWarn: '',

                stopSubmitDate: '',

                repairStatus: '',

                takecareStardardeDetailList: [
                    {
                        filePath: '123',
                    },
                ],

                nextCheckDate: '',

                checkCycle: '',

                checkPoint: '',

                leadingPersonId: '',

                qName: '',

                nextTakecareDate: '',

                setPart: '',

                checkStandardeDetailList: [],

                actualDestoryDate: '',

                isNeedTest: '',

                alertNum: '',

                checkContent: '',

                useMemo: '',

                previousTestDate: '',

                isNeedTakecare: '',

                destoryReason: '',

                checkDetailList: [],

                positionNum: '',

                testCycle: '',

                recoveryReason: '',

                isNeedCheck: '',

                actualRecoveryDate: '',

                leadingPersonDepartmentId: '',

                stopReason: '',

                destorySubmitDate: '',

                testDetailList: [],

                checkWarn: '',

                repaireDetailList: [],

                equipmentTypeId: 1,

                useDate: '',

                recoverySubmitDate: '',

                lockNum: '',

                stopSubmitPersonId: '',

                afterStopStep: '',

                lifeCycle: '',

                delCheckStandardeDetails: '',

                delTakecareStardardeDetails: '',

                delTakecareDetails: '',

                delRepaireDetails: '',

                delTestDetails: '',
            };
        };
        const activeName = ref('first');
        const index = ref<any>();
        const categoryShow = ref();
        const opencategory = () => {
            categoryShow.value.openDailog();
        };
        const regionShow = ref();
        const openRegion = () => {
            regionShow.value.openDailog();
        };
        const UserShow = ref();
        const openUser = (type: any) => {
            UserShow.value.openDailog(type);
        };
        const maintenanceShow = ref();
        const openMaintenance = (title: string, data: any) => {
            index.value = form.value.takecareDetailList.indexOf(data);
            maintenanceShow.value.openDailog(title, data);
        };
        const detectShow = ref();
        const openDetect = (title: string, data: any) => {
            index.value = form.value.testDetailList.indexOf(data);
            detectShow.value.openDailog(title, data);
        };
        const repairShow = ref();
        const openRepair = (title: string, data: any) => {
            index.value = form.value.repaireDetailList.indexOf(data);
            repairShow.value.openDailog(title, data);
        };
        const standardShow = ref();
        const openStandard = (title: string, data: any) => {
            index.value = form.value.checkStandardeDetailList.indexOf(data);
            standardShow.value.openDailog(title, data);
        };
        // 上传
        const fileList = ref<UploadUserFile[]>([
            {
                name: 'element-plus-logo.svg',
                url: 'https://element-plus.org/images/element-plus-logo.svg',
            },
            {
                name: 'element-plus-logo2.svg',
                url: 'https://element-plus.org/images/element-plus-logo.svg',
            },
        ]);

        const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
            console.log(file, uploadFiles);
        };

        const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
        };

        const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
            ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
        };

        const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
            return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
                () => true,
                () => false
            );
        };
        const deleteAId = ref([]);
        const deleteBId = ref([]);
        const deleteCId = ref([]);
        const deleteDId = ref([]);
        // 删除
        const deleteA = (tag: any) => {
            form.value.takecareDetailList.splice(form.value.takecareDetailList.indexOf(tag), 1);
            deleteAId.value.push(tag.id);
        };
        const deleteB = (tag: any) => {
            form.value.testDetailList.splice(form.value.testDetailList.indexOf(tag), 1);
            deleteBId.value.push(tag.id);
        };
        const deleteC = (tag: any) => {
            form.value.repaireDetailList.splice(form.value.repaireDetailList.indexOf(tag), 1);
            deleteCId.value.push(tag.id);
        };
        const deleteD = (tag: any) => {
            form.value.checkStandardeDetailList.splice(form.value.checkStandardeDetailList.indexOf(tag), 1);
            deleteDId.value.push(tag.id);
        };
        // 回传
        const main = (val: any) => {
            if (index.value == -1) {
                form.value.takecareDetailList.push(val);
            } else {
                form.value.takecareDetailList[index.value] = val;
            }
        };
        const delect = (val: any) => {
            if (index.value == -1) {
                form.value.testDetailList.push(val);
            } else {
                form.value.testDetailList[index.value] = val;
            }
        };
        const Repair = (val: any) => {
            if (index.value == -1) {
                form.value.repaireDetailList.push(val);
            } else {
                form.value.repaireDetailList[index.value] = val;
            }
        };
        const Stand = (val: any) => {
            if (index.value == -1) {
                form.value.checkStandardeDetailList.push(val);
            } else {
                form.value.checkStandardeDetailList[index.value] = val;
            }
        };
        const userId = (val: any, type: number) => {
            console.log(val, type);
            if (type == 0) {
                form.value.leadingPersonId = val.uid;
            } else if (type == 1) {
                form.value.stopSubmitPersonId = val.uid;
            }
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        const data = ref();
        return {
            userId,
            department,
            propse,
            data,
            deleteAId,
            deleteBId,
            deleteCId,
            deleteDId,
            deleteA,
            deleteB,
            deleteC,
            deleteD,
            main,
            index,
            delect,
            Repair,
            Stand,
            resetForm,
            submitForm,
            titles,
            dialogVisible,
            disabled,
            Dailogtype,
            form,
            openDailog,
            Search,
            activeName,
            categoryShow,
            opencategory,
            regionShow,
            openRegion,
            UserShow,
            openUser,
            maintenanceShow,
            openMaintenance,
            detectShow,
            openDetect,
            repairShow,
            openRepair,
            standardShow,
            openStandard,
            fileList,
            handleRemove,
            handlePreview,
            handleExceed,
            beforeRemove,
            full,
            toggleFullscreen,
            FullScreen,
      timeDate,
        };
    },
});
</script>
<style scoped>
.el-form-item {
    width: 400px;
}
.formType:after {
    content: '';
    width: 400px;
}
.formType {
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.el-form .el-form-item:last-of-type {
    margin-bottom: 22px !important;
}
</style>

 src/components/equipmentDailog/DailogS.vue

对比新文件
@@ -0,0 +1,661 @@
<template>
    <el-dialog :fullscreen="full" v-model="dialogVisible" draggable :title="titles" width="60%">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="130px" :disabled="disabled">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="类型/类别外键" size="default">
                        <el-input v-model="form.equipmentTypeId" placeholder="请选择">
                            <template #append>
                                <el-button :icon="Search" @click="opencategory"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="装置/部位名称" size="default">
                        <el-input v-model="form.name" placeholder="请选择" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="所属部门" size="default">
                        <el-tree-select v-model="form.departmentId" :data="data" check-strictly="true" placeholder="请选择" :props="propse" style="width: 100%">
                        </el-tree-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="具体位置" size="default">
                        <el-input v-model="form.position" placeholder="请填写具体位置" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="11">
                    <el-form-item label="负责人姓名" size="default">
                        <el-input v-model="form.leadingPersonName" placeholder="请填写负责人姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="联系人" size="default">
                        <el-input v-model="form.connectPersonId" placeholder="请选择">
                            <template #append>
                                <el-button :icon="Search" @click="openUser(0)"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="录入人" size="default">
                        <el-input v-model="form.inputPersonId" placeholder="请选择">
                            <template #append>
                                <el-button :icon="Search" @click="openUser(1)"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="责任人" size="default">
                        <el-input v-model="form.responsibilityPersonId" placeholder="请选择">
                            <template #append>
                                <el-button :icon="Search" @click="openUser(2)"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="装置部位分类" size="default">
                        <el-select v-model="form.partType" placeholder="请选择" style="width: 100%">
                            <el-option label="关键装置" value="关键装置" />
                            <el-option label="重点部位" value="重点部位" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="检查周期" size="default">
                        <el-input v-model="form.checkCycle" placeholder="请选择检查周期" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="相关应急预案" size="default">
                        <el-input v-model="form.emergencePlanId" placeholder="请选择">
                            <template #append>
                                <el-button :icon="Search" @click="openPlan"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="主要危险有害因素" size="default">
                        <el-input v-model="form.dangerousElement" placeholder="请选择" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="11">
                    <el-form-item label="易导致风险" size="default">
                        <el-input v-model="form.toDangerous" placeholder="请选择易导致风险" />
                    </el-form-item>
                </el-col>

                <el-col :span="11" :offset="2">
                    <el-form-item label="应急处置措施" size="default">
                        <el-input v-model="form.treatment" placeholder="请选择应急处置措施" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="现场图片">
                        <el-upload
                            v-model="form.scenePic"
                            class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="备注信息" size="default"> <el-input v-model="form.name" placeholder="请选择应急处置措施" /> </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="设备保养" name="first">
                <el-button type="primary" size="default" @click="openMaintenance('新增', '')">新增</el-button>
                <el-table :data="form.takecareDetailList" style="width: 100%">
                    <el-table-column align="center" prop="takecareMemo" label="保养情况" />
                    <el-table-column align="center" prop="leadingPersonId" label="保养负责人" />
                    <el-table-column align="center" prop="takecareDate" :formatter="timeDate" label="保养日期" />
                    <el-table-column align="center" prop="leadingPersonDepartmentId" label="保养负责人单位" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openMaintenance('查看', scope.row)" size="small">查看</el-button>
              <el-button link type="primary" @click="openMaintenance('修改', scope.row)" size="small">修改</el-button>
              <el-button link type="primary" @click="deleteA(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="设备检测" name="second">
                <el-button type="primary" size="default" @click="openDetect('新增', '')">新增</el-button>
                <el-table :data="form.testDetailList" style="width: 100%">
                    <el-table-column align="center" prop="testPersonId" label="检测人" />
                    <el-table-column align="center" prop="testDate" :formatter="timeDate" label="检测日期" />
                    <el-table-column align="center" prop="testPersonDepartmentId" label="检测人单位" />
                    <el-table-column align="center" prop="testMemo" label="检测内容" />
                    <el-table-column align="center" prop="testResult" label="检测结果" />
                    <el-table-column align="center" prop="testStatus" label="检测状态" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openDetect('查看', scope.row)" size="small">查看</el-button>
              <el-button link type="primary" @click="openDetect('修改', scope.row)" size="small">修改</el-button>
              <el-button link type="primary" @click="deleteB(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="设备维修" name="third">
                <el-button type="primary" size="default" @click="openRepair('新增', '')">新增</el-button>
                <el-table :data="form.repaireDetailList" style="width: 100%">
                    <el-table-column align="center" prop="exceptionInfo" label="设施异常项" />
                    <el-table-column align="center" prop="repairStatus" label="维修状态" />
                    <el-table-column align="center" prop="repairMemo" label="维修情况" />
                    <el-table-column align="center" prop="repairPersonId" label="维修负责人" />
                    <el-table-column align="center" prop="repairPersonDepartmentId" label="维修负责人单位" />
                    <el-table-column align="center" prop="repairStartDate" :formatter="timeDate" label="维修开始日期" />
                    <el-table-column align="center" prop="repairEndDate" :formatter="timeDate" label="维修结束日期" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openRepair('查看', scope.row)" size="small">查看</el-button>
              <el-button link type="primary" @click="openRepair('修改', scope.row)" size="small">修改</el-button>
              <el-button link type="primary" @click="deleteC(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="检查标准设置" name="fourth"
                >
                <el-button type="primary" size="default" @click="openStandard('新增', '')">新增</el-button>
                <el-table :data="form.checkStandardeDetailList" style="width: 100%">
                    <el-table-column align="center" type="indexNum" label="序号" width="75" />
                    <el-table-column align="center" prop="checkContent" label="检查内容" />
                    <el-table-column align="center" prop="checkTarget" label="检查指标" />
                    <el-table-column align="center" prop="unit" label="单位" />
                    <el-table-column align="center" prop="checkPart" label="巡检部位" />
                    <el-table-column align="center" prop="rate" label="频次" />
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="openStandard('查看', scope.row)" size="small">查看</el-button>
              <el-button link type="primary" @click="openStandard('修改', scope.row)" size="small">修改</el-button>
              <el-button link type="primary" @click="deleteD(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="巡检记录" name="five">
                <el-table :data="name" style="width: 100%">
                    <el-table-column align="center" type="selection" width="75" />
                    <el-table-column align="center" sortable prop="name" label="任务编号" />
                    <el-table-column align="center" sortable prop="address" label="任务名称" />
                    <el-table-column align="center" sortable prop="address" label="点位类型" />
                    <el-table-column align="center" sortable prop="address" label="检查频次" />
                    <el-table-column align="center" sortable prop="address" :formatter="timeDate" label="巡检时间" />
                    <el-table-column align="center" sortable prop="address" label="巡检人" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="保养维修标准" name="six" v-if="Dailogtype">
                <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :limit="3"
                    :on-exceed="handleExceed"
                >
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip"></div>
                    </template>
                </el-upload>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm">关闭</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <categoryDailog ref="categoryShow"></categoryDailog>
    <RegionsDialog ref="planShow" @SearchUser="onUser"></RegionsDialog>
    <DailogSearchUser ref="UserShow" @SearchUser="userId"></DailogSearchUser>
    <maintenanceDailog ref="maintenanceShow" @onMain="main"></maintenanceDailog>
    <detectDailog ref="detectShow" @onDelect="delect"></detectDailog>
    <repairDailog ref="repairShow" @onRepair="Repair"></repairDailog>
    <standardDailog ref="standardShow" @onStand="Stand"></standardDailog>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Search, Plus, FullScreen } from '@element-plus/icons-vue';
import {timeDate} from '/@/assets/index.ts'
import categoryDailog from './categoryDailog.vue';
import RegionsDialog from '../../views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue';
import maintenanceDailog from './maintenanceDailog.vue';
import detectDailog from './detectDailog.vue';
import repairDailog from './repairDailog.vue';
import standardDailog from './standardDailog.vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
import {goalManagementApi} from "/@/api/goalManagement";
export default defineComponent({
    components: { categoryDailog, RegionsDialog, DailogSearchUser, maintenanceDailog, detectDailog, repairDailog, standardDailog },
    setup(props, { emit }) {
        const dialogVisible = ref(false);
        const form = ref({
            equipmentTypeId: '',

            treatment: '',

            inputPersonId: '',

            departmentId: '',

            delRepaireDetailList: [],

            delTestDetailList: [],

            takecareDetailList: [],
      checkDetailList: [],

      responsibilityPersonId: '',

      delTakecareStardardeDetailList: [],

      connectPersonId: '',

      scenePic: '',

      partType: '',

      toDangerous: '',

      dangerousElement: '',

      takecareStardardeDetailList: [
                {
                    filePath: '',
                },
            ],
      testDetailList: [],
      checkCycle: '',
      repaireDetailList: [],
      delCheckStandardeDetailList: [],

      leadingPersonName: '',

      name: '',

            delTakecareDetailList: [],

      position: '',

      emergencePlanId: '',

      checkStandardeDetailList: [],
      infoTpe: '',
      delCheckStandardeDetails: '',

      delTakecareStardardeDetails: '',

      delTakecareDetails: '',

      delRepaireDetails: '',

      delTestDetails: '',
        });
    const titles = ref();
    const disabled = ref(false);
    const Dailogtype = ref(false);
        const openDailog = (title: string, type: boolean, id: number, num: any) => {
            dialogVisible.value = true;
      department();
            Dailogtype.value = type;
      if (num == 0) {
        titles.value = `${title}仪表信息`;
        form.value.infoTpe = num;
      } else if (num == 1) {
        titles.value = `${title}设备设施`;
        form.value.infoTpe = num;
      } else if (num == 2) {
        titles.value = `${title}设备设施`;
        form.value.infoTpe = num;
      }

      disabled.value = title == '查看' ? true : false;
      if (title == '查看' || title == '修改')
        facilityManagementApi()
        .getkeypointEquipmentInfoDetail(id)
        .then((res) => {
          if (res.data.code == 200) {
            form.value = res.data.data;
          } else {
            ElMessage.error(res.data.msg);
          }
        });
        };
    // 提交
    const submitForm = () => {
      form.value.delTakecareDetails =deleteAId.value.toString()
      form.value.delTestDetails =deleteBId.value.toString()
      form.value.delRepaireDetails =deleteCId.value.toString()
      form.value.delCheckStandardeDetails =deleteDId.value.toString()
      dialogVisible.value = false;
      facilityManagementApi()
          .getkeypointEquipmentInfoAddOrUpdate(form.value)
          .then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                message: res.data.msg,
                type: 'success',
              });
              emit('navAddorUpdata');
            } else {
              ElMessage.error(res.data.msg);
            }
          });
      // form.value = null;
    };
    //   取消
    const resetForm = () => {
      dialogVisible.value = false;
    };
        const activeName = ref('first');
    const index = ref<any>();
    const categoryShow = ref();
    const opencategory = () => {
      categoryShow.value.openDailog();
    };

    // 应急预案弹窗
        const planShow = ref();
        const openPlan = () => {
            planShow.value.openDailog();
        };
    const onUser = (e:any) => {
      form.value.emergencePlanId=e.id
    };

        const UserShow = ref();
        const openUser = (type: any) => {
            UserShow.value.openDailog(type);
        };
        const maintenanceShow = ref();
        const openMaintenance = (title: string, data: any) => {
      index.value = form.value.takecareDetailList.indexOf(data);
            maintenanceShow.value.openDailog(title, data);
        };
        const detectShow = ref();
        const openDetect = (title: string, data: any) => {
      index.value = form.value.testDetailList.indexOf(data);
            detectShow.value.openDailog(title, data);
        };
        const repairShow = ref();
        const openRepair = (title: string, data: any) => {
      index.value = form.value.repaireDetailList.indexOf(data);
            repairShow.value.openDailog(title, data);
        };
        const standardShow = ref();
        const openStandard = (title: string, data: any) => {
      index.value = form.value.checkStandardeDetailList.indexOf(data);
            standardShow.value.openDailog(title, data);
        };
        // 上传
        const fileList = ref<UploadUserFile[]>([
            {
                name: 'element-plus-logo.svg',
                url: 'https://element-plus.org/images/element-plus-logo.svg',
            },
            {
                name: 'element-plus-logo2.svg',
                url: 'https://element-plus.org/images/element-plus-logo.svg',
            },
        ]);

        const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
            console.log(file, uploadFiles);
        };

        const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
        };

        const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
            ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
        };

        const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
            return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
                () => true,
                () => false
            );
        };
    const deleteAId = ref([]);
    const deleteBId = ref([]);
    const deleteCId = ref([]);
    const deleteDId = ref([]);
    // 删除
    const deleteA = (tag: any) => {
      form.value.takecareDetailList.splice(form.value.takecareDetailList.indexOf(tag), 1);
      deleteAId.value.push(tag.id);
    };
    const deleteB = (tag: any) => {
      form.value.testDetailList.splice(form.value.testDetailList.indexOf(tag), 1);
      deleteBId.value.push(tag.id);
    };
    const deleteC = (tag: any) => {
      form.value.repaireDetailList.splice(form.value.repaireDetailList.indexOf(tag), 1);
      deleteCId.value.push(tag.id);
    };
    const deleteD = (tag: any) => {
      form.value.checkStandardeDetailList.splice(form.value.checkStandardeDetailList.indexOf(tag), 1);
      deleteDId.value.push(tag.id);
    };
    // 回传
    const main = (val: any) => {
      if (index.value == -1) {
        form.value.takecareDetailList.push(val);
      } else {
        form.value.takecareDetailList[index.value] = val;
      }
    };
    const delect = (val: any) => {
      if (index.value == -1) {
        form.value.testDetailList.push(val);
      } else {
        form.value.testDetailList[index.value] = val;
      }
    };
    const Repair= (val:any)=>{
      if (index.value == -1) {
        form.value.repaireDetailList.push(val);
      } else {
        form.value.repaireDetailList[index.value] = val;
      }
    }
    const Stand=(val:any)=>{
      if (index.value == -1) {
        form.value.checkStandardeDetailList.push(val);
      } else {
        form.value.checkStandardeDetailList[index.value] = val;
      }
    }

        //图片提交
        const imageUrl = ref('');

        const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
            imageUrl.value = URL.createObjectURL(uploadFile.raw!);
        };

        const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
            if (rawFile.type !== 'image/jpeg') {
                ElMessage.error('Avatar picture must be JPG format!');
                return false;
            } else if (rawFile.size / 1024 / 1024 > 2) {
                ElMessage.error('Avatar picture size can not exceed 2MB!');
                return false;
            }
            return true;
        };

    const userId = (val: any, type: number) => {
      console.log(val, type);
      if (type == 0) {
        form.value.connectPersonId = val.uid;
      } else if (type == 1) {
        form.value.inputPersonId = val.uid;
      } else if (type == 2){
        form.value.responsibilityPersonId = val.uid;
      }
    };
    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            }
          });
    };
    const propse = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    };
    const data = ref();
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
      propse,
      data,
            submitForm,
            dialogVisible,
            Dailogtype,
            form,
            openDailog,
            Search,
      main,
      delect,
      Repair,
      Stand,
      index,
            activeName,
            categoryShow,
            opencategory,
            planShow,
      onUser,
            openPlan,
            UserShow,
            openUser,
            maintenanceShow,
            openMaintenance,
            detectShow,
            openDetect,
            repairShow,
            openRepair,
            standardShow,
      userId,
            openStandard,
            fileList,
            handleRemove,
            handlePreview,
            handleExceed,
      disabled,
      titles,
            beforeRemove,
            imageUrl,
            handleAvatarSuccess,
            beforeAvatarUpload,
            Plus,
            full,
            toggleFullscreen,
            FullScreen,
            resetForm,
      deleteAId,
      deleteBId,
      deleteCId,
      deleteDId,
      deleteA,
      deleteB,
      deleteC,
      deleteD,
      timeDate,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>

 src/components/equipmentDailog/categoryDailog.vue

对比新文件
@@ -0,0 +1,161 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="选择类型/类别外键" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="类别名称" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6" :offset="1">
                            <el-form-item>
                                <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="11" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button size="default" :icon="Delete">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1" @change="radio">
                                <el-radio :label="scope.row.date" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="date" label="id" />
                    <el-table-column align="center" prop="name" label="类别名称" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="7">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag }}
                </el-tag>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['2016-05-03']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('2016-05-03');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            radio1,
            radio,
            Delete,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/equipmentDailog/detectDailog.vue

对比新文件
@@ -0,0 +1,155 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="检测人" size="default">
                            <el-input v-model="form.testPersonId">
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="检测日期" size="default">
                        <el-date-picker v-model="form.testDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="检测人单位" size="default">
                        <el-select v-model="form.testPersonDepartmentId" placeholder="请选择" style="width: 100%">
                            <el-option label="xxx单位1" value="1" />
                            <el-option label="xxx单位2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="检测内容" size="default">
                        <el-input v-model="form.testMemo" placeholder="请填写检测内容" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="检测结果" size="default">
                        <el-select v-model="form.testResult" placeholder="请选择" style="width: 100%">
                            <el-option label="成功" value="1" />
                            <el-option label="失败" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="检测状态" size="default">
                        <el-input v-model="form.testStatus" placeholder="请填写检测状态" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> -->
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearchUser ref="Show" @SearchUser="User"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const form = ref({
            testPersonId: '',
            testDate: '',
            testPersonDepartmentId: '',
            testMemo: '',
            testResult: '',
            testStatus: '',
        });
        // 开启弹窗
        const titles = ref();
        const disabled = ref(false);
        const dialogVisible = ref(false);
        const openDailog = (title: string, data: any) => {
            dialogVisible.value = true;
            titles.value = `${title}设备检测`;
            if (title == '查看') {
                disabled.value = true;
                form.value = data;
            } else if(title == '修改'){
                disabled.value = false;
                form.value = data;
            }
        };
        // 开启用户弹窗
        const Show = ref();
        const openUser = () => {
            Show.value.openDailog();
        };
        const User = (val: any) => {
            form.value.testPersonId = val.uid;
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            emit('onDelect', form.value);
            form.value = {
                testPersonId: '',
                testDate: '',
                testPersonDepartmentId: '',
                testMemo: '',
                testResult: '',
                testStatus: '',
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                testPersonId: '',
                testDate: '',
                testPersonDepartmentId: '',
                testMemo: '',
                testResult: '',
                testStatus: '',
            };
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            form,
            titles,
            User,
            disabled,
            dialogVisible,
            openDailog,
            submitForm,
            resetForm,
            Show,
            openUser,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/equipmentDailog/maintenanceDailog.vue

对比新文件
@@ -0,0 +1,134 @@
<template>
    <el-dialog :fullscreen="full" v-model="dialogVisible" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="保养情况" size="default">
                        <el-input v-model="form.takecareMemo" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="保养负责人" size="default">
                        <el-input v-model="form.leadingPersonId">
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="保养日期" size="default">
                        <el-date-picker v-model="form.takecareDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="保养负责人单位" size="default">
                        <el-select v-model="form.leadingPersonDepartmentId" style="width: 100%">
                            <el-option label="xxx单位1" value="1" />
                            <el-option label="xxx单位2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> -->
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearchUser ref="Show" @SearchUser="User"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const form = ref({
            takecareMemo: '',
            leadingPersonId: '',
            takecareDate: '',
            leadingPersonDepartmentId: '',
        });
        // 开启弹窗
    const titles=ref()
        const disabled=ref(false)
        const dialogVisible = ref(false);
        const openDailog = (title:string,data:any) => {
            dialogVisible.value = true;
            titles.value=`${title}仪器仪表`
            if(title=='查看'){
                disabled.value=true
                form.value=data
            }else if(title == '修改'){
                disabled.value=false
                form.value=data
            }
        };
        // 开启用户弹窗
        const Show = ref();
        const openUser = () => {
            Show.value.openDailog();
        };
        const User = (val: any) => {
            form.value.leadingPersonId = val.uid;
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            emit('onMain', form.value);
            form.value = {
                takecareMemo: '',
                leadingPersonId: '',
                takecareDate: '',
                leadingPersonDepartmentId: '',
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
                form.value = {
                takecareMemo: '',
                leadingPersonId: '',
                takecareDate: '',
                leadingPersonDepartmentId: '',
            };
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            disabled,
            titles,
            submitForm,
            resetForm,
            form,
            User,
            dialogVisible,
            openDailog,
            Show,
            openUser,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/equipmentDailog/planDailog.vue

对比新文件
@@ -0,0 +1,156 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="选择所属重大危险源单元" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="预案名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button size="default" :icon="Delete">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center" width="80">
                        <template #default="scope">
                            <el-radio-group v-model="radio1" @change="radio">
                                <el-radio :label="scope.row.date" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="date" label="id"/> -->
                    <el-table-column align="center" prop="name" label="预案名称" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="7">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag }}
                </el-tag>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['2016-05-03']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('2016-05-03');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            radio1,
            radio,
            Delete,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/equipmentDailog/regionDailog.vue

对比新文件
@@ -0,0 +1,156 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="选择区域名称" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="风险区域名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button size="default" :icon="Delete">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center" width="80">
                        <template #default="scope">
                            <el-radio-group v-model="radio1" @change="radio">
                                <el-radio :label="scope.row.date" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="date" label="id"/> -->
                    <el-table-column align="center" prop="name" label="风险区域名称" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="7">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag }}
                </el-tag>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['2016-05-03']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('2016-05-03');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            radio1,
            radio,
            Delete,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/equipmentDailog/repairDailog.vue

对比新文件
@@ -0,0 +1,165 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :before-close="resetForm" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="设施异常项" size="default">
                        <el-input v-model="form.exceptionInfo" placeholder="请填写设施异常项" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="维修状态" size="default">
                        <el-select v-model="form.repairStatus" placeholder="请选择" style="width: 100%">
                            <el-option label="维修中" value="1" />
                            <el-option label="已修好" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="维修情况" size="default">
                        <el-input v-model="form.repairMemo" placeholder="请填写维修情况" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="维修负责人" size="default">
                        <el-input v-model="form.repairPersonId" placeholder="请选择">
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="维修负责人单位" size="default">
                        <el-select v-model="form.repairPersonDepartmentId" placeholder="请选择" style="width: 100%">
                            <el-option label="xxxxx单位" value="1" />
                            <el-option label="xxx单位" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="维修开始日期" size="default">
                        <el-date-picker v-model="form.repairStartDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="维修结束日期" size="default">
                        <el-date-picker v-model="form.repairEndDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> -->
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearchUser ref="Show" @SearchUser="User"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const form = ref({
            exceptionInfo: '',
            repairStatus: '',
            repairMemo: '',
            repairPersonId: '',
            repairPersonDepartmentId: "",
            repairStartDate: '',
            repairEndDate: '',
        });
        // 开启弹窗
        const titles = ref();
        const disabled = ref(false);
        const dialogVisible = ref(false);
        const openDailog = (title: string, data: any) => {
            dialogVisible.value = true;
            titles.value = `${title}设备维修`;
            if (title == '查看') {
                disabled.value = true;
                form.value = data;
            } else if(title == '修改') {
                disabled.value = false;
                form.value = data;
            }
        };
        // 开启用户弹窗
        const Show = ref();
        const openUser = () => {
            Show.value.openDailog();
        };
        const User = (val: any) => {
            form.value.repairPersonId = val.uid;
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            emit('onRepair', form.value);
            form.value = {
                exceptionInfo: '',
                repairStatus: '',
                repairMemo: '',
                repairPersonId: '',
                repairPersonDepartmentId: "",
                repairStartDate: '',
                repairEndDate: '',
            };
        };
        //  取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                exceptionInfo: '',
                repairStatus: '',
                repairMemo: '',
                repairPersonId: '',
                repairPersonDepartmentId: "",
                repairStartDate: '',
                repairEndDate: '',
            };
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            form,
            titles,
            disabled,
            dialogVisible,
            openDailog,
            Show,
            User,
            openUser,
            submitForm,
            resetForm,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/equipmentDailog/standardDailog.vue

对比新文件
@@ -0,0 +1,143 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :before-close="resetForm" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small"  class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="120px" :disabled="disabled">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="序号" size="default">
                        <el-input v-model="form.indexNum" placeholder="请填写序号" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2" size="default">
                    <el-form-item label="检查内容">
                        <el-input v-model="form.checkContent" placeholder="请填写检查内容" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="检查指标" size="default">
                        <el-input v-model="form.checkTarget" placeholder="请填写检查指标" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="单位" size="default">
                        <el-input v-model="form.unit" placeholder="请填写单位" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="巡检部位" size="default">
                        <el-input v-model="form.checkPart" placeholder="请填写巡检部位" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="频次" size="default">
                        <el-input v-model="form.rate" placeholder="请填写频次" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> -->
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- <DailogSearchUser ref="Show"></DailogSearchUser> -->
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const form = ref({
            indexNum: '',
            checkContent: '',
            checkTarget: '',
            unit: '',
            checkPart: "",
            rate: '',
        });
        // 开启弹窗
        const titles = ref();
        const disabled = ref(false);
        const dialogVisible = ref(false);
        const openDailog = (title: string, data: any) => {
            dialogVisible.value = true;
            titles.value = `${title}检查标准设置`;
            if (title == '查看') {
                disabled.value = true;
                form.value = data;
            } else if(title=='修改'){
                disabled.value = false;
                form.value = data;
            }
        };
        // 开启用户弹窗
        const Show = ref();
        const openUser = () => {
            Show.value.openDailog();
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            emit('onStand', form.value);
            form.value = {
                indexNum: '',
                checkContent: '',
                checkTarget: '',
                unit: '',
                checkPart: "",
                rate: '',
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                indexNum: '',
                checkContent: '',
                checkTarget: '',
                unit: '',
                checkPart: "",
                rate: '',
            };
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            form,
            titles,
            disabled,
            dialogVisible,
            openDailog,
            submitForm,
            resetForm,
            Show,
            openUser,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/components/regionsDialog/index.vue

对比新文件
@@ -0,0 +1,129 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择区域" width="900px" draggable :fullscreen="full">
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="18">
        <el-form :inline="true" ref="ruleFormRef" :model="ruleForm" status-icon>
            <el-form-item>
                <el-input size="default" v-model="ruleForm.checkPass" placeholder="风险区域名称" style="max-width: 215px;" />
            </el-form-item>
            <el-form-item>
                <el-button size="default" type="primary" @click="submitForm(ruleFormRef)" style="margin-left: 12px;">查询</el-button>
                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
      <el-button size="default" :icon="Delete" style="margin-left: 12px;">清除选择</el-button>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-top:20px;">
      <el-table-column type="selection" width="55" />
            <el-table-column align="center" prop="name" label="风险区域名称"/>
        </el-table>
        <el-pagination
            style="padding:20px 0;"
            v-model:currentPage="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        </el-col>
        <el-col :span="6" style="padding-left: 15px;">
            <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
        </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  ref
} from 'vue';
import {
  Delete,
  FullScreen
} from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            checkPass: '',
        });
        // 表格
        const tableData = [
            {
                name: '1#LNG储罐单元',
            },
            {
                name: 'LNG装车区',
            },
            {
                name: '丙烷储罐区',
            },
            {
                name: '4#LNG储罐单元',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['应急救援组', '工艺抢险组', '后勤保障组']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
        };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
      toggleFullscreen,
      FullScreen,
      full,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
.el-form--inline .el-form-item{
  margin: 0;
}
</style>

 src/components/updata/updata.vue

对比新文件
@@ -0,0 +1,89 @@
<template>
    <el-dialog v-model="dialogVisible" title="导入Excel" width="50%" :fullscreen="full" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
        >
            <el-button>下载模板</el-button>
            <el-button type="primary">点击上传</el-button>
            <template #tip>
                <div class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
            </template>
        </el-upload>
    </el-dialog>
</template>
<script lang="ts">
import { ref, toRefs, reactive, defineComponent, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        let dialogVisible = ref<boolean>(false);
        const fileList = ref<UploadUserFile[]>([
            {
                name: 'element-plus-logo.svg',
                url: 'https://element-plus.org/images/element-plus-logo.svg',
            },
            {
                name: 'element-plus-logo2.svg',
                url: 'https://element-plus.org/images/element-plus-logo.svg',
            },
        ]);

        const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
            console.log(file, uploadFiles);
        };

        const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
        };

        const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
            ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
        };

        const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
            return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
                () => true,
                () => false
            );
        };
        // 打开弹窗
        const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
            dialogVisible.value = true;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            }else{
        full.value = false;
      }
        };
        return {
            dialogVisible,
            fileList,
            handleRemove,
            handlePreview,
            handleExceed,
            beforeRemove,
            openDialog,
      full,
      toggleFullscreen,
      FullScreen
        };
    },
});
</script>
<style scoped>
</style>

 src/components/uploaderImg/index.vue

对比新文件
@@ -0,0 +1,65 @@
<template>
    <el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="successFile"
            :on-error="errorFile"
    >
        <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
<script lang="ts">
    import { ref,defineComponent } from 'vue'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps, UploadUserFile } from 'element-plus'

    export default defineComponent({
        props: {
            // svg 图标组件名字
            fileList: {
                type: Array,
            },
        },
        components: {
            Plus
        },
        setup() {

            const dialogImageUrl = ref('')
            const dialogVisible = ref(false)

            const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
                console.log(uploadFile, uploadFiles)
            }

            const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
                dialogImageUrl.value = uploadFile.url!
                dialogVisible.value = true
            }

            const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles)  => {
                console.log(response, uploadFile,uploadFiles)
            }
            const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles)  => {
                console.log(error, uploadFile,uploadFiles)
            }


            return {
                dialogImageUrl,
                dialogVisible,
                handleRemove,
                handlePictureCardPreview,
                successFile,
                errorFile
            };
        },
    });
</script>

 src/components/userCheckbox/index.vue

对比新文件
@@ -0,0 +1,422 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="用户选择"
        v-model="isShowDialog"
        width="1000px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
        <el-aside width="200px">
          <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
          <el-tree
              ref="treeRef"
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="ruleForm.name" placeholder="登录名"> </el-input>
              </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>
          </el-header>
          <el-main style="position: relative;">
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                @cell-click="checkbox"
            >
              <el-table-column type="selection"  width="55">
                <template #default="scope">
                  <el-checkbox-group v-model="checkbox1">
                    <el-checkbox :label="scope.row.uid" size="large">{{ null }}</el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column prop="realName" label="登录名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="username" label="用户名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属部门" width="115" show-overflow-tooltip sortable/>
              <el-table-column align="center" prop="type" label="状态" />
<!--              <el-table-column  label="状态"-->
<!--                                width="80"-->
<!--                                prop="tag"-->
<!--                                :filters="[-->
<!--                     { text: '正常', value: 'Home' },-->
<!--                     { text: '不正常', value: 'Office' },-->
<!--                   ]"-->
<!--                                :filter-method="filterTag"-->
<!--                                filter-placement="bottom-end">-->
<!--                <template #default="scope">-->
<!--                  <el-tag-->
<!--                      :type="scope.row.tag === 'Home' ? '' : 'success'"-->
<!--                      disable-transitions-->
<!--                  >{{ scope.row.tag }}</el-tag-->
<!--                  >-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div style="width: 200px;">
          <div v-if="dynamicTags[0]==''?false:true">
            <el-tag
                v-for="tag in dynamicTags"
                :key="tag"
                class="mx-1"
                style="margin: 5px"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
            >
              {{ tag.realName }}
            </el-tag>
          </div>
        </div>
      </el-container>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

import type {
  ElTree,
  // ElTable,
} from 'element-plus'
import {
  ElMessage,
} from 'element-plus';
import {
  FullScreen
} from '@element-plus/icons-vue'
import {goalManagementApi} from "/@/api/goalManagement";
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
// interface User {
//   date: string
//   name: string
//   address: string
// }
export default defineComponent({
  name: 'userSelections',
  components: {
    // Search,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = (type:any) => {
      types.value=type
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };

    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            }
          });
    };
    const defaultProps = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    }
    //部门树查询
    const filterText = ref('')
    const treeRef = ref<InstanceType<typeof ElTree>>()  //实例化
    watch(filterText, (val) => {
      treeRef.value!.filter(val);
    });
    // 节点过滤模糊搜索
    const filterNode = (depName: string, data: Tree) => {
      if (!depName) return true
      return data.depName.includes(depName)
    }
    onMounted(() => {
      department();
    });
    //左边树形部分点击获取回调
    const names = ref<any>();
    const handleNodeClick = (data: Tree) => {
      goalManagementApi()
          .getManName(data.depId)
          .then((res) => {
            if (res.data.code == 200) {
              tableData.value=res.data.data
            }else{
              ElMessage.error(res.data.msg);
            }
          });
    };


    // 监听搜索关键字改变
    watch(filterText, (val) => {
      treeRef.value!.filter(val)
    })
    // 树形结构内容
    const data = ref()




    // const item = {
    //   date: '孙刚',
    //   name: '龚赛健',
    //   address: '综合办公室',
    //   tag: '正常',
    // }
    // const tableData = ref(Array.from({ length: 7 }).fill(item))
    // 定义表单搜索
    const ruleForm = reactive({
      name: '',
    })
    const types=ref()
    // 搜索按钮
    const onSubmit = () => {
      let obj = JSON.parse(JSON.stringify(dynamicTags.value));
      emit('SearchUser', obj[0],types.value);
      isShowDialog.value = false;
    }

    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['']);
    const handleClose = () => {
      dynamicTags.value.push(checkbox1.value)
      // dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      checkbox1.value = '';
    };
    const checkbox1 = ref('');
    const checkbox = (event: any) => {
      dynamicTags.value[0] = event;
    };
    const tableData = ref();
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      defaultProps,
      filterNode,
      data,
      tableData,
      ruleForm,
      onSubmit,
      // multipleTableRef,
      handleClose,
      dynamicTags,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      toggleFullscreen,
      FullScreen,
      full,
      names,
      handleNodeClick,
      types,
      checkbox1,
      checkbox,
    };
  },
});
</script>
<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
  padding: 0;
}
.layout-container-demo .el-aside {
  padding: 10px;
  border: 1px solid #ebeef5;
  color: var(--el-text-color-primary);
}
::v-deep .el-input--large .el-input__inner {
  height: 32px!important;
  line-height: 32px!important;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-input--large{
  //width: 178px;
  height: 32px;
}
.el-tree{
  overflow: auto;
}
::-webkit-scrollbar {
  height: 1px;

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::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;
}
//单选框圆形
//::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
//  display:none
//}
//::v-deep .el-table-column--selection .cell{
//  text-align: center;
//}
//::v-deep .el-checkbox__input .el-checkbox__inner{
//  border-radius: 50%;
//}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::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/components/userSelections/index.vue

对比新文件
@@ -0,0 +1,446 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="用户选择"
        v-model="isShowDialog"
        width="1000px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
        <el-aside width="200px">
          <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
          <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
              </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>
          </el-header>
          <el-main style="position: relative;">
              <el-table
                  :data="tableData"
                  :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                  @cell-click="radio"
              >
                <el-table-column align="center" width="55">
                  <template #default="scope">
                    <el-radio-group v-model="radio1">
                      <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
                <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
                <el-table-column  label="状态"
                                  width="80"
                  prop="tag"
                  :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                        :filter-method="filterTag"
                        filter-placement="bottom-end">
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.tag === 'Home' ? '' : 'success'"
                        disable-transitions
                    >{{ scope.row.tag }}</el-tag
                    >
                  </template>
                </el-table-column>
              </el-table>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div style="width: 200px;">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-container>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

import type {
  ElTree,
  // ElTable,
} from 'element-plus'
import {
  FullScreen
} from '@element-plus/icons-vue'
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
// interface User {
//   date: string
//   name: string
//   address: string
// }
export default defineComponent({
  name: 'userSelections',
  components: {
    // Search,
  },
  setup(props,{emit}) {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      let obj=JSON.parse(JSON.stringify(dynamicTags.value))
      emit("SearchUser",obj[0])
      closeDialog();
    };


    const filterText = ref('')
    const treeRef = ref<InstanceType<typeof ElTree>>()  //实例化

    const defaultProps = {
      children: 'children',
      label: 'label',
    }

    // 监听搜索关键字改变
    watch(filterText, (val) => {
      treeRef.value!.filter(val)
    })

    // 节点过滤模糊搜索
    const filterNode = (value: string, data: Tree) => {
      if (!value) return true
      return data.label.includes(value)
    }

    // 树形结构内容
    const data: Tree[] = [
      {
        id: 1,
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            id: 4,
            label: '经营班子',
            children: []
          },
        ],
      },
      {
        id: 2,
        label: '生产运行部',
        children: [
          {
            id: 5,
            label: '工艺二班',
          },
          {
            id: 6,
            label: '灌装一班',
          },
        ],
      },
      {
        id: 3,
        label: '设备部',
        children: [
          {
            id: 7,
            label: '仪表班',
          },
          {
            id: 8,
            label: '机修班',
          },
        ],
      },
    ]
    // const item = {
    //   date: '孙刚',
    //   name: '龚赛健',
    //   address: '综合办公室',
    //   tag: '正常',
    // }
    // const tableData = ref(Array.from({ length: 7 }).fill(item))
    const tableData = [
      {
        date: '孙刚',
        name: '孙刚',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '谭柏',
        name: '谭柏',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪威',
        name: '倪威',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪玲婕',
        name: '倪玲婕',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
    ];
    // 定义表单搜索
    const formInline = reactive({
      name: '',
    })
    // 搜索按钮
    const onSubmit = () => {
      console.log('submit!')
    }

    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['胡海涛']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      defaultProps,
      filterNode,
      data,
      tableData,
      formInline,
      onSubmit,
      // multipleTableRef,
      handleClose,
      dynamicTags,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      radio1,
      radio,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
  padding: 0;
}
.layout-container-demo .el-aside {
  padding: 10px;
  border: 1px solid #ebeef5;
  color: var(--el-text-color-primary);
}
::v-deep .el-input--large .el-input__inner {
  height: 32px!important;
  line-height: 32px!important;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-input--large{
  //width: 178px;
  height: 32px;
}
.el-tree{
  overflow: auto;
}
::-webkit-scrollbar {
  height: 1px;

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::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;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::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/main.ts

 src/router/index.ts

@@ -66,6 +66,9 @@

// 路由加载前
router.beforeEach(async (to, from, next) => {
    if (to.path === '/intelligentMap') {
        next();
    } else {
    NProgress.configure({ showSpinner: false });
    if (to.meta.title) NProgress.start();
    const token = Session.get('token');
@@ -94,6 +97,7 @@
            }
        }
    }
    }
});

// 路由加载后

 src/router/route.ts

@@ -79,5 +79,13 @@
            title: '首页',
            isKeepAlive: false
        }
    },
    {
        path: '/intelligentMap',
        name: 'intelligentMap',
        component: () => import('/@/views/intellectInspect/intelligentMap/index.vue'),
        meta: {
            title: '巡检路线'
        }
    }
];

 src/utils/request.ts

@@ -6,7 +6,7 @@
// var jsonBig = require('json-bigint')({ "storeAsString": true });
// 配置新建一个 axios 实例
const service = axios.create({
    baseURL: import.meta.env.VITE_API_URL as any,
    // baseURL: import.meta.env.VITE_API_URL as any,
    timeout: 50000,
    headers: { 'Content-Type': 'application/json' }
});
@@ -14,7 +14,7 @@
service.interceptors.request.use(
    (config) => {
        for (let key in config.data) {
            if (config.data[key] == '') {
            if (config.data[key] == '' && config.data[key] !== 0) {
                config.data[key] = null;
            }
        }

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

对比新文件
@@ -0,0 +1,461 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog
                title="编辑伤亡人员"
                v-model="isShowDialog"
                width="769px"
                draggable
                :fullscreen="full"
        >
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    size="default"
                    label-width="120px"
            >
                <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="sex">
                            <el-select v-model="ruleForm.gender" 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="teamName">
                            <el-input v-model="ruleForm.card" placeholder="请输入身份证号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="伤害描述">
                            <el-input v-model="ruleForm.injuryDesc" type="textarea" placeholder="请输入内容"
                                      maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="受损描述">
                            <el-input v-model="ruleForm.damageDesc" type="textarea" placeholder="请输入内容"
                                      maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-button v-if="!disabled" size="default" type="primary" @click="onAdd()">添加</el-button>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="name" label="姓名"/>
                            <el-table-column prop="gender" label="性别">
                                <template #default="scope">
                                    <div v-if="scope.row.gender==false">
                                        男
                                    </div>
                                    <div v-else>
                                        女
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="card" label="身份证"/>
                            <el-table-column prop="injuryDesc" label="伤害描述"/>
                            <el-table-column prop="damageDesc" label="受损描述"/>
                            <el-table-column v-if="!disabled" label="操作" width="60" align="center" fixed="right">
                                <template #default="scope">
                                    <el-button size="small" text type="primary" @click="onDelete(scope.row.id)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <CheckTemplate ref="Shows"/>
        <userSelections ref="userRef"/>
        <RegionsDialog ref="openRef"/>
    </div>
</template>

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

    import type {
        UploadUserFile,
        FormInstance,
        // FormRules,
    } from 'element-plus'
    import {ElMessage} from 'element-plus';
    import {
        Search,
        FullScreen
    } from '@element-plus/icons-vue'
    import UserSelections from "/@/components/userSelections/index.vue"
    import CheckTemplate from '/@/components/checkTemplate/index.vue'
    import RegionsDialog from '/@/components/regionsDialog/index.vue'
    import {accidentManagementSystemApi} from '/@/api/accidentManagementSystem';

    export default defineComponent({
        name: 'openEdit',
        components: {
            CheckTemplate,
            UserSelections,
            RegionsDialog,
        },
        setup() {
            const isShowDialog = ref(false)

            const ruleFormRef = ref<FormInstance>()
            //定义表单
            const accidentExpressId = ref()
            const ruleForm = reactive({
                accidentExpressId: accidentExpressId,
                name: '', // 姓名
                gender: '', //性别
                card: '', // 身份证
                injuryDesc: '', // 伤害描述
                damageDesc: '', // 受损描述
            });
            const tableData = ref([])
            const disabled = ref([])
            // 打开弹窗
            const openDialog = (id, type) => {
                accidentExpressId.value = id
                isShowDialog.value = true;
                disabled.value = type
                onList()
            };
            // 一览
            const onList = () => {
                accidentManagementSystemApi()
                    .casualtyList(accidentExpressId.value)
                    .then((res) => {
                        if (res.data.code == '200') {
                            tableData.value = res.data.data
                            console.log('伤亡人员一览', tableData.value)
                        }
                    })
            };
            // 添加
            const onAdd = () => {
                if (accidentExpressId.value != null && accidentExpressId.value != '') {
                    accidentManagementSystemApi()
                        .casualtyAdd(ruleForm)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success',
                                });
                                onList()
                            }
                        })
                } else {
                    ElMessage({
                        showClose: true,
                        message: '请先添加事故快报',
                        type: 'error',
                    });
                }
            };
            // 删除
            const onDelete = (id) => {
                accidentManagementSystemApi()
                    .casualtyDel(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ElMessage({
                                showClose: true,
                                message: '删除成功',
                                type: 'success',
                            });
                            onList()
                        }
                    })
            };
            // 关闭弹窗
            const closeDialog = () => {
                isShowDialog.value = false;
            };
            // 取消
            const onCancel = () => {
                closeDialog();
            };
            //日期选择器
            const value1 = ref('')
            // 上传附件
            const fileList = ref<UploadUserFile[]>([])
            // 可选择树
            const treeSelect = ref()
            const tree = [
                {
                    value: '1',
                    label: 'Level one 1',
                    children: [
                        {
                            value: '1-1',
                            label: 'Level two 1-1',
                            children: [
                                {
                                    value: '1-1-1',
                                    label: 'Level three 1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: '2',
                    label: 'Level one 2',
                    children: [
                        {
                            value: '2-1',
                            label: 'Level two 2-1',
                            children: [
                                {
                                    value: '2-1-1',
                                    label: 'Level three 2-1-1',
                                },
                            ],
                        },
                        {
                            value: '2-2',
                            label: 'Level two 2-2',
                            children: [
                                {
                                    value: '2-2-1',
                                    label: 'Level three 2-2-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: '3',
                    label: 'Level one 3',
                    children: [
                        {
                            value: '3-1',
                            label: 'Level two 3-1',
                            children: [
                                {
                                    value: '3-1-1',
                                    label: 'Level three 3-1-1',
                                },
                            ],
                        },
                        {
                            value: '3-2',
                            label: 'Level two 3-2',
                            children: [
                                {
                                    value: '3-2-1',
                                    label: 'Level three 3-2-1',
                                },
                            ],
                        },
                    ],
                },
            ]
            //定义树形下拉框
            const responsibleDepartment = ref()
            const data = [
                {
                    value: '1',
                    label: '广汇能源综合物流发展有限责任公司',
                    children: [
                        {
                            value: '1-1',
                            label: '经营班子',
                            children: [],
                        },
                    ],
                },
                {
                    value: '2',
                    label: '生产运行部',
                    children: [
                        {
                            value: '2-1',
                            label: '灌装一班',
                            children: []
                        },
                        {
                            value: '2-2',
                            label: '工艺四班',
                            children: [],
                        },
                    ],
                },
                {
                    value: '3',
                    label: '设备部',
                    children: [
                        {
                            value: '3-1',
                            label: '仪表班',
                            children: [],
                        },
                        {
                            value: '3-2',
                            label: '机修班',
                            children: [],
                        },
                    ],
                },
            ]
            // 必填项提示
            // const rules = reactive<FormRules>({
            //   teamName: [
            //     {
            //       required: true,
            //       message: '队伍名称不能为空',
            //       trigger: 'change',
            //     },
            //   ],
            //   teamLevel: [
            //     {
            //       required: true,
            //       message: '队伍级别不能为空',
            //       trigger: 'change',
            //     },
            //   ],
            //   teamLeader: [
            //     {
            //       required: true,
            //       message: '队伍负责人不能为空',
            //       trigger: 'change',
            //     },
            //   ],
            //   responsibleDepartment: [
            //     {
            //       required: true,
            //       message: '负责人部门不能为空',
            //       trigger: 'change',
            //     },
            //   ],
            //   teamPhone: [
            //     {
            //       required: true,
            //       message: '负责人手机不能为空',
            //       trigger: 'change',
            //     },
            //   ],
            //   telephone: [
            //     {
            //       required: true,
            //       message: '固定电话不能为空',
            //       trigger: 'change',
            //     },
            //   ],
            // })
            // 表单提交验证必填项
            const submitForm = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        console.log('submit!')
                        closeDialog();
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }
            // 应急队伍弹窗
            const Shows = ref()
            const daiInpt = () => {
                Shows.value.openDailog()
            }
            // 选择区域弹窗
            const openRef = ref()
            const regionsDialog = () => {
                openRef.value.openDailog()
            }
            // 打开用户选择弹窗
            const userRef = ref();
            const openUser = () => {
                userRef.value.openDialog();
            };
            //全屏
            const full = ref(false);
            const toggleFullscreen = () => {
                if (full.value == false) {
                    full.value = true;
                } else {
                    full.value = false;
                }
            };
            return {
                openDialog,
                closeDialog,
                isShowDialog,
                onCancel,
                fileList,
                responsibleDepartment,
                data,
                Search,
                ruleForm,
                value1,
                treeSelect,
                tree,
                daiInpt,
                Shows,
                ruleFormRef,
                submitForm,
                // rules,
                openUser,
                userRef,
                regionsDialog,
                openRef,
                toggleFullscreen,
                FullScreen,
                full,
                tableData,
                onAdd,
                onDelete,
                accidentExpressId,
                disabled
            };
        },
    });
</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/accidentManagementSystem/accidentExpress/component/openAdd.vue

对比新文件
@@ -0,0 +1,474 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" size="default" label-width="140px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故名称" prop="accidentName">
                            <el-input v-model="ruleForm.accidentName" :disabled="disabled" placeholder="请填写事故名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故部门" placeholder="请选择" prop="accidentDepartmentId">
                            <el-tree-select
                                v-model="ruleForm.accidentDepartmentId"
                                :disabled="disabled"
                                :props="propse"
                                :data="newTreeList"
                                class="w100"
                                placeholder="请选择"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发生地点" prop="occurrencePlace">
                            <el-input v-model="ruleForm.occurrencePlace" :disabled="disabled" placeholder="请填写发生地点"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发生时间" prop="occurrenceTime">
                            <!--<el-input v-model="ruleForm.occurrenceTime" :disabled="disabled" placeholder="请填写发生时间"></el-input>-->
                            <el-date-picker
                                :disabled="disabled"
                                v-model="ruleForm.occurrenceTime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故原因" prop="accidentCause">
                            <el-select v-model="ruleForm.accidentCause" :disabled="disabled" class="w100" placeholder="请选择">
                                <el-option label="人的不安全行为" value="1"></el-option>
                                <el-option label="物的不安全状态" value="2"></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="casualties">
                            <el-radio-group v-model="ruleForm.casualties" :disabled="disabled" @change="typeChang">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                            <el-button v-if="ruleForm.casualties" type="primary" style="margin-left: 20px" :icon="Edit" @click="openDai" round plain />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故简要经过" prop="accidentBriefProcess">
                            <el-input
                                v-model="ruleForm.accidentBriefProcess"
                                :disabled="disabled"
                                type="textarea"
                                placeholder="请填写事故简要经过"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故原因初步分析" prop="accidentCausesPreliminaryAnalysis">
                            <el-input
                                v-model="ruleForm.accidentCausesPreliminaryAnalysis"
                                :disabled="disabled"
                                type="textarea"
                                placeholder="请填写事故原因初步分析"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急防范措施" prop="emergencyPrecautions">
                            <el-input
                                v-model="ruleForm.emergencyPrecautions"
                                :disabled="disabled"
                                type="textarea"
                                placeholder="请填写应急防范措施"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="事故照片" prop="fileList">
                            <!--<el-input v-model="ruleForm.fileList" :disabled="disabled"-->
                            <!--type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>-->
                            <uploaderImg :fileList="fileListDemo"></uploaderImg>
                        </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" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <NumberOfCasualties ref="ShowUser"></NumberOfCasualties>
        <CheckTemplate ref="Shows" />
        <userSelections ref="userRef" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

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

        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            emergencyPrecautions: '',
            accidentCausesPreliminaryAnalysis: '',
            accidentBriefProcess: '',
            casualties: '',
            accidentCause: '',
            occurrenceTime: '',
            occurrencePlace: '',
            accidentDepartmentId: '',
            accidentName: '',
            fileList: [],
            id: '',
        });
        const titles = ref();
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看事故快报' || title == '修改事故快报') {
                accidentManagementSystemApi()
                    .accidentScarh(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const value1 = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        const fileListDemo = ref<UploadUserFile[]>([
            {
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
            },
            {
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
            },
        ]);
        // 可选择树
        const treeSelect = ref();

        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = [];
        //el-tree-select回显
        const propse = {
            label: 'depName',
            children: 'children',
        };
        const newTreeList = [];
        //得到部门树
        const department = async () => {
            await goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                        getTreeList(res.data.data, newTreeList);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        // 递归树状数据且修改字段名
        const getTreeList = (treeList, newTreeList) => {
            treeList.map((c) => {
                let tempData = {
                    depName: c.depName,
                    value: c.depId,
                    children: [],
                };
                if (c.children && c.children.length > 0) {
                    tempData.children = [];
                    getTreeList(c.children, tempData.children);
                }
                newTreeList.push(tempData);
            });
        };
        onMounted(() => {
            department();
        });
        // 必填项提示
        const rules = reactive<FormRules>({
            accidentName: [
                {
                    required: true,
                    message: '事故名称不能为空',
                    trigger: 'change',
                },
            ],
            accidentDepartmentId: [
                {
                    required: true,
                    message: '事故部门不能为空',
                    trigger: 'change',
                },
            ],
            occurrencePlace: [
                {
                    required: true,
                    message: '发生地点不能为空',
                    trigger: 'change',
                },
            ],
            occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'blur' }],
            accidentCause: [
                {
                    required: true,
                    message: '事故原因不能为空',
                    trigger: 'change',
                },
            ],
            casualties: [
                {
                    required: true,
                    message: '是否有伤亡不能为空',
                    trigger: 'change',
                },
            ],
            accidentBriefProcess: [
                {
                    required: true,
                    message: '事故简要经过不能为空',
                    trigger: 'change',
                },
            ],
            accidentCausesPreliminaryAnalysis: [
                {
                    required: true,
                    message: '事故原因初步分析不能为空',
                    trigger: 'change',
                },
            ],
            emergencyPrecautions: [
                {
                    required: true,
                    message: '应急防范措施不能为空',
                    trigger: 'change',
                },
            ],
        });
        // 子传父
        // const emit=defineEmits(['myAdd'])
        // 表单提交验证必填项
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建事故快报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        ruleForm.value.id = null;
                        accidentManagementSystemApi()
                            .accidentAdd(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;
                        ruleForm.value.fileList = [
                            // {
                            //     fileUrl: 'url',
                            //     fileName: 'name',
                            // },
                        ];
                        accidentManagementSystemApi()
                            .accidentView(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
                formEl.resetFields();
            }
            ruleForm.value = {
                accidentExpressId: '',
                emergencyPrecautions: '',
                accidentCausesPreliminaryAnalysis: '',
                accidentBriefProcess: '',
                casualties: '',
                accidentCause: '',
                occurrenceTime: '',
                occurrencePlace: '',
                accidentDepartmentId: '',
                accidentName: '',
                fileList: [],
            };
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        const closeDialog = (formEl: FormInstance | undefined) => {
            formEl.resetFields();
            console.log(ruleForm);
            isShowDialog.value = false;
        };
        // 是否有伤亡弹窗
        const typeChang = () => {
            console.log('tag', ruleForm);
        };
        const ShowUser = ref();
        const openDai = () => {
            ShowUser.value.openDialog(ruleForm.value.id, disabled.value);
        };
        // 应急队伍弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
        };
        // 选择区域弹窗
        const openRef = ref();
        const regionsDialog = () => {
            openRef.value.openDailog();
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDialog();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            ShowUser,
            typeChang,
            openDialog,
            isShowDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            Edit,
            ruleForm,
            value1,
            treeSelect,
            daiInpt,
            Shows,
            ruleFormRef,
            submitForm,
            resetForm,
            rules,
            openUser,
            userRef,
            regionsDialog,
            openDai,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disabled,
            emit,
            propse,
            department,
            getTreeList,
            newTreeList,
            closeDialog,
            fileListDemo,
        };
    },
});
</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/accidentManagementSystem/accidentExpress/index.vue

对比新文件
@@ -0,0 +1,346 @@
<template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="default" v-model="listQuery.searchParams.accidentName" placeholder="事故名称" style="max-width: 215px" />
                <el-button size="default" type="primary" class="ml10" @click="listApi"> 查询 </el-button>
                <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button>
            </div>
            <div class="button_Line">
                <div class="button_Left">
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon> <Plus /> </el-icon>新建
                    </el-button>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon> <Edit /> </el-icon>修改
                    </el-button>
                    <el-button size="default" type="danger" @click="onDeleteAll" plain :disabled="danger">
                        <el-icon> <Delete /> </el-icon>删除
                    </el-button>
                </div>
                <div class="button_Right">
                    <!-- <el-button @click="upButton">
                        <el-icon>
                            <Upload />
                        </el-icon>
                    </el-button>
                    <el-button>
                        <el-icon>
                            <Download />
                        </el-icon>
                    </el-button>
                    <el-button>
                        <el-icon>
                            <Refresh />
                        </el-icon>
                    </el-button> -->
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" prop="accidentName" label="事故名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="deptName" label="事故部门" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="occurrencePlace" label="发生地点" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="occurrenceTime" label="发生时间" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="accidentCause" label="事故原因" show-overflow-tooltip sortable>
                    <template #default="scope">
                        <div v-if="scope.row.accidentCause=='1'">人的不安全行为</div>
                        <div v-if="scope.row.accidentCause=='2'">物的不安全状态</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="createName" label="创建人" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="gmtModitify" label="更新时间" show-overflow-tooltip sortable></el-table-column>
                <el-table-column label="操作" width="260" align="center" fixed="right">
                    <template #default="scope">
                        <!-- <el-button size="small" text disabled>
                            <el-icon style="margin-right: 5px"> <Upload /> </el-icon>上报
                        </el-button> -->
                        <el-button size="small" text type="primary" @click="onEdit('修改', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>修改
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit('详情', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <View /> </el-icon>详情
                        </el-button>
                        <el-button size="small" text type="primary" @click="onDelete(scope.row.id)">
                            <el-icon style="margin-right: 5px"> <Delete /> </el-icon>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-if="tableData.length == 0 ? false : true"
                    v-model:currentPage="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
                    :pager-count="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
        <upData ref="upShow"></upData>
    </div>
</template>

<script lang="ts">
import { reactive, onMounted, ref, defineComponent } from 'vue';
import { ElTable, ElMessage, ElMessageBox } from 'element-plus';
import { Plus, View, Download, Refresh, EditPen, Edit, Delete, Upload } from '@element-plus/icons-vue';
import OpenAdd from '/@/views/accidentManagementSystem/accidentExpress/component/openAdd.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
export default defineComponent({
    name: 'index',
    components: {
        EditPen,
        Plus,
        Upload,
        Download,
        Refresh,
        Edit,
        Delete,
        UpData,
        OpenAdd,
        View,
    },

    setup() {
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                accidentName: '',
            },
        });
        // 定义表格数据
        const tableData = ref([]);
        // 列表数据请求
        const listApi = async () => {
            let res = await accidentManagementSystemApi().accidentList(listQuery);
            if (res.data.code == 200) {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                });
            }
        };
        onMounted(() => {
            listApi();
        });
        // 重置
        const submitReset = () => {
            listQuery.searchParams.accidentName = '';
            listApi();
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
            // console.log(`${val} items per page`);
            listQuery.pageSize = val;
            listApi();
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            listQuery.pageIndex = val;
            listApi();
        };
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr;
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };

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

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

        return {
            upButton,
            upShow,
            tableData,
            pageIndex,
            pageSize,
            total,
            handleSizeChange,
            handleCurrentChange,
            onEdit,
            onOpenAdd,
            addRef,
            listQuery,
            listApi,
            submitReset,
            warning,
            danger,
            handleSelectionChange,
            onMyAdd,
            onDelete,
            deletAll,
            onDeleteAll,
        };
    },
});
</script>
<style scoped lang="scss">
.table_Box {
    padding: 20px;
    background-color: #fff;
}
.tableForm {
    margin-top: 10px;
}
/*按钮行*/
.button_Line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
//分页
.pages {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,665 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="800px" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" label-width="140px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故快报" prop="accidentName">
                            <el-input v-model="ruleForm.accidentName" :disabled="true" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="daiInpt" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故部门" placeholder="请选择" prop="accidentDepartmentId">
                            <!--<el-input v-model="ruleForm.accidentDepartmentName" class="input-with-select" />-->
                            <el-tree-select v-model="ruleForm.accidentDepartmentId" :disabled="true" :data="newTreeList"
                                            :props="propse" class="w100" placeholder="请选择" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故发生地点" prop="occurrencePlace">
                            <el-input v-model="ruleForm.occurrencePlace" :disabled="true" placeholder="请填写发生地点"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发生时间" prop="occurrenceTime">
                            <el-date-picker
                                v-model="ruleForm.occurrenceTime"
                                :disabled="true"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故类别" prop="accidentType">
                            <el-select v-model="ruleForm.accidentType" :disabled="disabled" class="w100" placeholder="请选择">
                                <el-option label="人员伤亡事故" value="人员伤亡事故"></el-option>
                                <el-option label="火灾爆炸事故" value="火灾爆炸事故"></el-option>
                                <el-option label="危险品泄露事故" value="危险品泄露事故"></el-option>
                                <el-option label="设备事故" value="设备事故"></el-option>
                                <el-option label="工艺事故" value="工艺事故"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故等级" prop="accidentGrade">
                            <el-select v-model="ruleForm.accidentGrade" :disabled="disabled" class="w100" placeholder="请选择">
                                <el-option label="特别重大" value="人员伤亡事故"></el-option>
                                <el-option label="重大" value="重大"></el-option>
                                <el-option label="较大" value="较大"></el-option>
                                <el-option label="一般" value="一般"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="经济损失" prop="economicLoss">
                            <el-input v-model="ruleForm.economicLoss" :disabled="disabled" placeholder="请填写经济损失"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="轻伤人数" prop="minorInjuryNum">
                            <el-input v-model="ruleForm.minorInjuryNum" :disabled="disabled" placeholder="请填写轻伤人数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="重伤人数" prop="seriousInjuryNum">
                            <el-input v-model="ruleForm.seriousInjuryNum" :disabled="disabled" placeholder="请填写重伤人数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="死亡人数" prop="deathNum">
                            <el-input v-model="ruleForm.deathNum" :disabled="disabled" placeholder="请填写死亡人数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故原因" prop="accidentCause">
                            <el-input v-model="ruleForm.accidentCause" :disabled="disabled" placeholder="请填写事故原因"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="要求报告完成期限" prop="reportDeadline">
                            <el-date-picker
                                v-model="ruleForm.reportDeadline"
                                :disabled="disabled"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故级别" prop="accidentLevel">
                            <el-select v-model="ruleForm.accidentLevel" :disabled="disabled" class="w100" placeholder="请选择">
                                <el-option label="特大事故" value="特大事故"></el-option>
                                <el-option label="重大事故" value="重大事故"></el-option>
                                <el-option label="较大事故" value="较大事故"></el-option>
                                <el-option label="一般事故" value="一般事故"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故延期申请" prop="accidentDelayApply">
                            <el-input v-model="ruleForm.accidentDelayApply" :disabled="disabled" placeholder="请填写事故延期申请"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="原因综合分析(直接分析)" prop="comprehensiveAnalysisDirect">
                            <el-input
                                v-model="ruleForm.comprehensiveAnalysisDirect"
                                :disabled="disabled"
                                type="textarea"
                                placeholder="请填写原因综合分析(直接分析)"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="原因综合分析(间接分析)" prop="comprehensiveAnalysisIndirect">
                            <el-input
                                v-model="ruleForm.comprehensiveAnalysisIndirect"
                                :disabled="disabled"
                                type="textarea"
                                placeholder="请填写原因综合分析(间接分析)"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="整改措施" prop="rectificationMeasures">
                            <el-input v-model="ruleForm.rectificationMeasures" :disabled="disabled"
                                      type="textarea" placeholder="请填写整改措施" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故处理" prop="accidentHandling">
                            <el-input v-model="ruleForm.accidentHandling" :disabled="disabled"
                                      type="textarea" placeholder="请填写事故处理" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="填写人" prop="fillInUserName">
                            <el-input v-model="ruleForm.fillInUserName" :disabled="true"
                                      placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="填写日期" prop="fillInTime">
                            <el-date-picker
                                v-model="ruleForm.fillInTime"
                                :disabled="disabled"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
                    <!--            <el-form-item label="事故照片">-->
                    <!--              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="相关人员笔录" prop="relevantPersonnelRecords">
                            <el-input v-model="ruleForm.relevantPersonnelRecords" :disabled="disabled"
                                      type="textarea" placeholder="请填写相关人员笔录" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故状态" prop="status">
                            <el-select v-model="ruleForm.status" :disabled="statusDisabled" class="w100" placeholder="请选择">
                                <el-option label="处理中" :value="1"></el-option>
                                <el-option label="已处理" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="事故分析会议纪要" prop="fileList">
                            <uploaderImg :fileList="fileList" :disabled="disabled"></uploaderImg>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="其他材料" prop="otherMaterials">
                            <el-input v-model="ruleForm.otherMaterials" :disabled="disabled"
                                      type="textarea" placeholder="请填写其他材料" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <AccidentName @selectItem="onSelectItem" ref="Shows" />
        <DailogSearchUserManger @SearchUser="onUser" ref="userRef"  />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

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

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

        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            accidentExpressId:'',
            accidentExpressName:'',
            accidentDepartmentId:'',
            accidentDepartmentName:'',
            occurrencePlace:'',
            occurrenceTime:'',



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



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

 src/views/accidentManagementSystem/accidentReport/index.vue

对比新文件
@@ -0,0 +1,387 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            >
          <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 @click="onDeleteAll" :disabled="danger">
                <el-icon>
                  <Delete />
                </el-icon>删除
              </el-button>
            </div>
            <div class="button_Right">
              <el-button @click="upButton">
                <el-icon>
                  <Upload />
                </el-icon>
              </el-button>
              <el-button>
                <el-icon>
                  <Download />
                </el-icon>
              </el-button>
              <el-button>
                <el-icon>
                  <Refresh />
                </el-icon>
              </el-button>
            </div>
          </div>
          <el-table
              :data="tableData"
              style="width: 100%"
              ref="multipleTableRef"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                type="selection"
                width="55"
            />
            <el-table-column prop="accidentName" label="事故名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="deptName" label="事故部门" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentType" label="事故类别" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentGrade" label="事故等级" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="occurrencePlace" label="发生地点" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="occurrenceTime" 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="onEdit('详情',scope.row.id)">
                  <el-icon style="margin-right: 5px"> <View /> </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="onRowDel(scope.row.id)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
                v-model:currentPage="pageIndex"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :pager-count="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="40"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <!--<el-tab-pane label="已处理" name="second"></el-tab-pane>-->
      </el-tabs>
    </el-card>
    <OpenAdd ref="addRef" @myAdd="onMyAdd" />
<!--    <upData ref="upShow"></upData>-->
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  // ElTable,
  ElMessageBox,
  ElMessage,
  TabsPaneContext,
} from 'element-plus';
import {
  Plus,
  Upload,
  Download,
  Refresh,
  EditPen,
  View,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/accidentManagementSystem/accidentReport/component/openAdd.vue'
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";


export default defineComponent({
  name: 'systemUser',
  components: {
    EditPen,
    Plus,
    Upload,
    Download,
    Refresh,
    UpData,
    Edit,
    Delete,
    OpenAdd,
    View,
  },
  setup() {
    const activeName = ref('first')
    const statusDisabledFlag = ref('first')//控制弹窗中的事件状态是否可以修改
    const handleClick = (tab: TabsPaneContext, event: Event) => {
        if(tab.props.name=='first'){
            listQuery.searchParams.status=1
            statusDisabledFlag.value = 'first'
            listApi()
        }else if(tab.props.name=='second'){
            listQuery.searchParams.status=2
            statusDisabledFlag.value = 'second'
            listApi()
        }
    }

      const editableTabs = ref([
          {
              title: '处理中',
              name: 'first',
          },
          {
              title: '已处理',
              name: 'second',
          },
      ])
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        status: 1,
      },
    });
    // 定义表格数据
    const tableData = ref([]);
    // 请求列表数据
    const listApi = async () => {
      let res = await accidentManagementSystemApi().getAccidentReportList(listQuery);
      // console.log(res);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage.error(res.data.msg);
      }
    };
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
        let arr = [];
        for (let i = 0; i < valId.length; i++) {
            arr.push(valId[i].id);
        }
        deletAll.value = arr;
      // console.log(deletAll.value);
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
    // 页面加载时
    onMounted(() => {
      listApi();
    });
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建事故报告','',false,statusDisabledFlag);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 打开修改用户弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看事故报告',row,true,statusDisabledFlag);
      } else {
        addRef.value.openDialog('修改事故报告',row,false,statusDisabledFlag);
      }
    };
    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 删除用户
    const onRowDel = (data: any) => {
        var deleteList = [data]
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            accidentManagementSystemApi()
                .deleteAccidentReport(deleteList)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            accidentManagementSystemApi()
                .deleteAccidentReport(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };
    return {
      onOpenAdd,
      addRef,
      activeName,
      handleClick,
      // upButton,
      // upShow,
      tableData,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      listApi,
      handleSelectionChange,
      warning,
      danger,
      listQuery,
      onRowDel,
      total,
      onMyAdd,
      onDeleteAll,
      onEdit,
      editableTabs
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,240 @@
<template>
    <div>
        <el-dialog v-model="dialogVisible" title="选择事故名称" width="900px" draggable :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-row>
                <el-col :span="18">
                    <el-row>
                        <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.id" placeholder="id"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <el-form-item>
                                <el-input size="default" v-model="listQuery.searchParams.accidentName" placeholder="事故名称" style="min-width: 215px" />
                            </el-form-item>
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.deptName" placeholder="事故部门"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.occurrencePlace" placeholder="发生地点"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.occurrenceTime" placeholder="发生时间"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <el-form-item>
                                <el-button size="default" type="primary" @click="listApi">查询</el-button>
                                <el-button size="default" @click="submitReset">重置</el-button>
                                <el-button size="default" :icon="Delete" @click="handleClose">清除选择</el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <!--<el-table :data="tableData" style="width: 100%;margin-top:20px">-->
                    <!--<el-table-column type="selection" width="55" />-->
                    <!--<el-table-column align="center" prop="date" label="id" />-->
                    <!--<el-table-column align="center" prop="name" label="事故名称"/>-->
                    <!--<el-table-column align="center" prop="date" label="事故部门" />-->
                    <!--<el-table-column align="center" prop="name" label="发生地点"/>-->
                    <!--<el-table-column align="center" prop="name" label="发生时间"/>-->
                    <!--</el-table>-->
                    <!--<div class="pages">-->
                    <!--<el-pagination-->
                    <!--v-model:currentPage="currentPage4"-->
                    <!--v-model:page-size="pageSize4"-->
                    <!--:page-sizes="[100, 200, 300, 400]"-->
                    <!--:small="small"-->
                    <!--:disabled="disabled"-->
                    <!--:background="background"-->
                    <!--layout="total, sizes, prev, pager, next, jumper"-->
                    <!--:total="400"-->
                    <!--@size-change="handleSizeChange"-->
                    <!--@current-change="handleCurrentChange"-->
                    <!--/>-->
                    <!--</div>-->
                    <el-table :data="tableData" style="width: 100%" ref="multipleTableRef">
                        <el-table-column align="center">
                            <template #default="scope">
                                <el-radio-group v-model="radio1">
                                    <el-radio :label="scope.row.id" size="large" @click="checkedItem(scope.row)">{{ null }}</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <!--<el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>-->
                        <el-table-column prop="accidentName" label="事故名称" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="deptName" label="事故部门" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="occurrencePlace" label="发生地点" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="occurrenceTime" label="发生时间" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination
                            v-model:currentPage="pageIndex"
                            v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 30]"
                            :pager-count="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin: 5px" closable :disable-transitions="false" @close="handleClose()">
                        {{ tag.accidentName }}
                    </el-tag>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                    <el-button type="primary" @click="submitForm" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import {
    // ElTable,
    ElMessage,
} from 'element-plus';
import { accidentManagementSystemApi } from '/@/api/workInjuryDeclaration';
export default defineComponent({
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
            listApi();
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
        });
        // 定义表格数据
        const tableData = ref([]);
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                accidentName: '',
            },
        });
        //单选按钮
        const radio1 = ref('');
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
            listQuery.pageSize = val;
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
        };
        const checkedItem = (row: object) => {
            dynamicTags.value = [row];
        };
        // 重置
        const submitReset = () => {
            listQuery.searchParams = {};
            listApi();
        };
        const submitForm = () => {
            emit('selectItem', dynamicTags.value);
            dialogVisible.value = false;
        };
        //查询list数据
        const listApi = async () => {
            let res = await accidentManagementSystemApi().accidentList(listQuery);
            if (res.data.code == 200) {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage.error(res.data.msg);
            }
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref([]);
        const handleClose = () => {
            dynamicTags.value = [];
            radio1.value = '';
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
            toggleFullscreen,
            FullScreen,
            full,
            pageIndex,
            pageSize,
            total,
            listApi,
            listQuery,
            radio1,
            checkedItem,
            submitReset,
            submitForm,
        };
    },
});
</script>
<style scoped>
.el-form--inline .el-form-item {
    margin-bottom: 18px !important;
    margin-right: 12px;
}
/*分页*/
.pages {
    margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,510 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="769px" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="申报人姓名" prop="declareUserName">
                            <el-input v-model="ruleForm.declareUserName" :disabled="disabled" 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="declareUserGender">
                            <el-radio-group v-model="ruleForm.declareUserGender" :disabled="disabled">
                                <el-radio :label="false">男</el-radio>
                                <el-radio :label="true">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="申报人部门" placeholder="请选择" prop="declareDepartmentId">
                            <el-tree-select v-model="ruleForm.declareDepartmentId" :disabled="disabled"
                                            :data="newTreeList" :props="propse" class="w100" placeholder="请选择" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故名称" prop="accidentName">
                            <el-input v-model="ruleForm.accidentName" :disabled="true" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="daiInpt" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故发生时间" prop="occurrenceTime">
                            <el-date-picker
                                v-model="ruleForm.occurrenceTime"
                                :disabled="true"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="工伤类型" prop="workInjuryType">
                            <el-select v-model="ruleForm.workInjuryType" :disabled="disabled" class="w100" placeholder="请选择">
                                <el-option label="轻微伤" value="轻微伤"></el-option>
                                <el-option label="轻伤" value="轻伤"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="申报日期" prop="declareDate">
                            <el-date-picker
                                v-model="ruleForm.declareDate"
                                :disabled="disabled"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="损失工时" prop="lostTime">
                            <el-input v-model="ruleForm.lostTime" :disabled="disabled" placeholder="请填写损失工时"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="就诊医院" prop="visitHospital">
                            <el-input v-model="ruleForm.visitHospital" :disabled="disabled" placeholder="请填写就诊医院"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="就诊结果" prop="visitResult">
                            <el-input v-model="ruleForm.visitResult" :disabled="disabled" 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="相关附件">
                            <uploaderImg :fileList="fileList" :disabled="disabled"></uploaderImg>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="注意事项" prop="mattersNeedingAttention">
                            <el-input v-model="ruleForm.mattersNeedingAttention" :disabled="disabled" 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="completeMaterials">
                            <el-radio-group v-model="ruleForm.completeMaterials" :disabled="disabled">
                                <el-radio :label="false">否</el-radio>
                                <el-radio :label="true">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark" :disabled="disabled" type="textarea" placeholder="请填写备注" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <AccidentName @selectItem="onSelectItem" ref="showRef" />
        <userSelections ref="userRef" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

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

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

        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            declareUserName: '',
            declareUserGender: '',
            declareDepartmentId: '',
            accidentName:'',
            accidentExpressId: '',
            workInjuryType: '',
            declareDate: '',
            lostTime: '',
            visitHospital: '',
            visitResult: '',
            mattersNeedingAttention: '',
            completeMaterials: '',
            remark: '',
            fileList: [
                {
                    fileName: '',
                    fileUrl: '',
                },
            ],
        });
        const titles = ref();
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看工伤申报' || title == '修改工伤申报') {
                accidentManagementSystemApi()
                    .seeAccidentManagementSystem(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const value1 = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        // 可选择树
        const treeSelect = ref();
        const tree = [
        ];
        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = [

        ];
        //el-tree-select回显
        const propse = {
            label: 'depName',
            children: 'children',
        };
        const newTreeList = [];
        //得到部门树
        const department = async () => {
            await goalManagementApi()
                    .getTreedepartment()
                    .then((res) => {
                        if (res.data.code == 200) {
                            data.value = res.data.data;
                            getTreeList(res.data.data, newTreeList);
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 递归树状数据且修改字段名
        const getTreeList = (treeList, newTreeList) => {
            treeList.map((c) => {
                let tempData = {
                    depName: c.depName,
                    value: c.depId,
                    children: [],
                };
                if (c.children && c.children.length > 0) {
                    tempData.children = [];
                    getTreeList(c.children, tempData.children);
                }
                newTreeList.push(tempData);
            });
        };
        onMounted(() => {
            department();
        });
        // 关闭弹窗
        const closeDialog = (formEl: FormInstance | undefined) => {
            formEl.resetFields();
            isShowDialog.value = false;
        };
        // 必填项提示
        const rules = reactive<FormRules>({
            declareUserName: [
                {
                  required: true,
                  message: '申报人姓名不能为空',
                  trigger: 'change',
                },
              ],
            declareUserGender: [
                {
                  required: true,
                  message: '申报人性别不能为空',
                  trigger: 'change',
                },
              ],
            declareDepartmentId: [
                {
                  required: true,
                  message: '申报人部门不能为空',
                  trigger: 'change',
                },
              ],
            accidentName: [
                {
                  required: true,
                  message: '事故名称不能为空',
                  trigger: 'change',
                },
              ],
            workInjuryType: [
                {
                  required: true,
                  message: '工伤类型不能为空',
                  trigger: 'change',
                },
              ],
            declareDate: [
                {
                  required: true,
                  message: '申报日期不能为空',
                  trigger: 'blur',
                },
              ],
            lostTime: [
                {
                    required: true,
                    message: '损失工时不能为空',
                    trigger: 'change',
                },
            ],
            visitHospital: [
                {
                    required: true,
                    message: '就诊医院不能为空',
                    trigger: 'change',
                },
            ],
            visitResult: [
                {
                    required: true,
                    message: '就诊结果不能为空',
                    trigger: 'change',
                },
            ],
            mattersNeedingAttention: [
                {
                    required: true,
                    message: '注意事项不能为空',
                    trigger: 'change',
                },
            ],
            completeMaterials: [
                {
                    required: true,
                    message: '材料状态不能为空',
                    trigger: 'change',
                },
            ],
            remark: [
                {
                    required: true,
                    message: '备注不能为空',
                    trigger: 'change',
                },
            ]
        })

        // 事故名称弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        //事故快报回填
        const onSelectItem = (item: any) => {
            console.log('item', item);
            ruleForm.value.accidentExpressId = item[0].id
            ruleForm.value.accidentName = item[0].accidentName
            ruleForm.value.occurrenceTime = item[0].occurrenceTime

        };
        // 表单提交验证必填项
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建工伤申报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .workAdd(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
            } else if (title == '修改工伤申报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .workView(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
                formEl.resetFields();
                ruleForm.value = {
                    declareUserName: '',
                    declareUserGender: '',
                    declareDepartmentId: '',
                    accidentExpressId: '',
                    workInjuryType: '',
                    declareDate: '',
                    lostTime: '',
                    visitHospital: '',
                    visitResult: '',
                    mattersNeedingAttention: '',
                    completeMaterials: '',
                    remark: '',
                    fileList: [
                        {
                            fileName: '',
                            fileUrl: '',
                        },
                    ],
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 选择区域弹窗
        const openRef = ref();
        const regionsDialog = () => {
            openRef.value.openDailog();
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDialog();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            daiInpt,
            openDialog,
            isShowDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            ruleForm,
            value1,
            treeSelect,
            tree,
            showRef,
            ruleFormRef,
            submitForm,
            rules,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            resetForm,
            titles,
            disabled,
            emit,
            onSelectItem,
            department,
            getTreeList,
            newTreeList,
            propse,
            closeDialog,
            uploaderImg
        };
    },
});
</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/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue

对比新文件
@@ -0,0 +1,400 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建事故快报"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故名称" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故部门"  placeholder="请选择">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发生地点" prop="teamLeader">
              <el-input v-model="ruleForm.teamName" placeholder="请填写发生地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发生时间" prop="telephone">
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故原因" prop="teamLevel">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="人的不安全行为" value="admin"></el-option>
                <el-option label="物的不安全状态" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="是否有伤亡">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故简要经过">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故原因初步分析">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故原因初步分析" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急防范措施">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="事故照片">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

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

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

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

export default defineComponent({
  name: 'openEdit',
  components: {
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },
  setup() {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    });
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    //日期选择器
    const value1 = ref('')
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
    // 可选择树
    const treeSelect = ref()
    const tree = [
      {
        value: '1',
        label: 'Level one 1',
        children: [
          {
            value: '1-1',
            label: 'Level two 1-1',
            children: [
              {
                value: '1-1-1',
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '2-1',
            label: 'Level two 2-1',
            children: [
              {
                value: '2-1-1',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '2-2',
            label: 'Level two 2-2',
            children: [
              {
                value: '2-2-1',
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
      {
        value: '3',
        label: 'Level one 3',
        children: [
          {
            value: '3-1',
            label: 'Level two 3-1',
            children: [
              {
                value: '3-1-1',
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            value: '3-2',
            label: 'Level two 3-2',
            children: [
              {
                value: '3-2-1',
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
    ]
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '经营班子',
            children: [],
          },
        ],
      },
      {
        value: '2',
        label: '生产运行部',
        children: [
          {
            value: '2-1',
            label: '灌装一班',
            children: []
          },
          {
            value: '2-2',
            label: '工艺四班',
            children: [],
          },
        ],
      },
      {
        value: '3',
        label: '设备部',
        children: [
          {
            value: '3-1',
            label: '仪表班',
            children: [],
          },
          {
            value: '3-2',
            label: '机修班',
            children: [],
          },
        ],
      },
    ]
    // 必填项提示
    // const rules = reactive<FormRules>({
    //   teamName: [
    //     {
    //       required: true,
    //       message: '队伍名称不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLevel: [
    //     {
    //       required: true,
    //       message: '队伍级别不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLeader: [
    //     {
    //       required: true,
    //       message: '队伍负责人不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   responsibleDepartment: [
    //     {
    //       required: true,
    //       message: '负责人部门不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamPhone: [
    //     {
    //       required: true,
    //       message: '负责人手机不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   telephone: [
    //     {
    //       required: true,
    //       message: '固定电话不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    // })
    // 表单提交验证必填项
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</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/accidentManagementSystem/workInjuryDeclaration/index.vue

对比新文件
@@ -0,0 +1,406 @@
<template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-form ref="ruleFormRef" size="default" label-width="80px" :inline="true">
                    <el-form-item prop="telephone">
                        <el-input v-model="listQuery.searchParams.accidentName" placeholder="请选择事故快报" :disabled="true"
                                  class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" @click="daiInpt"/>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-button size="default" type="primary" class="ml10" @click="listApi"> 查询</el-button>
                    <el-button size="default" class="ml10" @click="submitReset"> 重置</el-button>
                </el-form>
            </div>
            <div class="button_Line">
                <div class="button_Left">
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon>
                            <Plus/>
                        </el-icon>
                        新建
                    </el-button>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon>
                            <Edit/>
                        </el-icon>
                        修改
                    </el-button>
                    <el-button size="default" type="danger" plain @click="onDeleteAll" :disabled="danger">
                        <el-icon>
                            <Delete/>
                        </el-icon>
                        删除
                    </el-button>
                </div>
                <div class="button_Right">
                    <el-button @click="upButton">
                        <el-icon>
                            <Upload/>
                        </el-icon>
                    </el-button>
                    <el-button>
                        <el-icon>
                            <Download/>
                        </el-icon>
                    </el-button>
                    <el-button>
                        <el-icon>
                            <Refresh/>
                        </el-icon>
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="declareUserName" label="申报人名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="deptName" label="申报人部门" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="accidentName" label="事故名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="workInjuryType" label="工商类型" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="declareDate" label="申报日期" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="visitHospital" label="就诊医院" show-overflow-tooltip sortable></el-table-column>
                <el-table-column label="操作" width="260" align="center" fixed="right">
                    <template #default="scope">
                        <!--<el-button size="small" text disabled>-->
                        <!--<el-icon style="margin-right: 5px"> <Upload /> </el-icon>上报-->
                        <!--</el-button>-->
                        <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
                            <el-icon style="margin-right: 5px">
                                <View/>
                            </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="onRowDel(scope.row.id)"> 删除</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"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
        <AccidentName ref="showRef" @selectItem="onSelectItem"/>
        <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
        <!--        <OpenEdit ref="editRef" />-->
        <upData ref="upShow"></upData>
    </div>
</template>

<script lang="ts">
    import {
        // toRefs,
        reactive,
        // onMounted,
        ref,
        defineComponent,
        onMounted,
    } from 'vue';
    import {
        ElMessageBox,
        ElMessage
    } from 'element-plus';
    import {
        Plus,
        Download,
        Refresh,
        View,
        EditPen,
        Edit,
        Delete,
        Search,
        Upload
    } from '@element-plus/icons-vue';
    import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue';
    import OpenAdd from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue';
    import OpenEdit from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue';
    import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
    import {accidentManagementSystemApi} from '/@/api/accidentManagementSystem';

    export default defineComponent({
        name: 'index',
        components: {
            OpenEdit,
            EditPen,
            Plus,
            Upload,
            Download,
            Refresh,
            Edit,
            View,
            Delete,
            UpData,
            OpenAdd,
            AccidentName,
        },
        setup() {
            //列表参数
            const listQuery = reactive({
                pageIndex: 1,
                pageSize: 10,
                searchParams: {
                    accidentExpressId: "",
                },
            });
            //搜索条件回填
            const onSelectItem = (item: any) => {
                console.log('item', item[0].accidentName);
                listQuery.searchParams.accidentExpressId = item[0].id
                listQuery.searchParams.accidentName = item[0].accidentName
            };
            // 定义表格数据
            const tableData = ref([]);
            // 请求列表数据
            const listApi = async () => {
                let res = await accidentManagementSystemApi().workList(listQuery);
                if (res.data.code == 200) {
                    tableData.value = res.data.data;
                    pageIndex.value = res.data.pageIndex;
                    pageSize.value = res.data.pageSize;
                    total.value = res.data.total;
                } else {
                    ElMessage.error(res.data.msg);
                }
            };
            onMounted(() => {
                listApi();
            });
            // 重置
            const submitReset = () => {
                listQuery.searchParams.accidentExpressId = ''
                listQuery.searchParams.accidentName = ''
                listApi();
            }
            const warning = ref(true);
            const danger = ref(true);
            const deletAll = ref();
            const handleSelectionChange = (val: any) => {
                let valId = JSON.parse(JSON.stringify(val));
                let arr = [];
                for (let i = 0; i < valId.length; i++) {
                    arr.push(valId[i].id);
                }
                deletAll.value = arr;
                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 showRef = ref();
            const daiInpt = () => {
                showRef.value.openDailog();
            };
            // 打开新增弹窗
            const addRef = ref();
            const onOpenAdd = () => {
                addRef.value.openDialog('新建工伤申报', false);
            };
            // 新增后刷新
            const onMyAdd = (e: boolean) => {
                if (e) {
                    listApi();
                } else {
                    listApi();
                }
            };
            // 上传
            const upShow = ref();
            const upButton = () => {
                upShow.value.openDialog();
            };

            // 打开修改用户弹窗
            // const editRef = ref();
            const onEdit = (val: string, row: object) => {
                if (val == '详情') {
                    addRef.value.openDialog('查看工伤申报', row, true);
                } else {
                    addRef.value.openDialog('修改工伤申报', row, false);
                }
            };
            // 删除用户
            const onRowDel = (data: any) => {
                ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        accidentManagementSystemApi()
                            .workDelete([data])
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    listApi();
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    listApi();
                                }
                            });
                    })
                    .catch(() => {
                    });
            };
            // 多选删除
            const onDeleteAll = () => {
                ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        accidentManagementSystemApi()
                            .workDelete(deletAll.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    listApi();
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    listApi();
                                }
                            });
                    })
                    .catch(() => {
                    });
            };
            // 分页
            const pageIndex = ref();
            const pageSize = ref();
            const total = ref();
            // 分页改变
            const handleSizeChange = (val: number) => {
                listQuery.pageSize = val;
            };
            // 分页未改变
            const handleCurrentChange = (val: number) => {
                listQuery.pageIndex = val;
            };
            return {
                daiInpt,
                showRef,
                upButton,
                upShow,
                tableData,
                pageIndex,
                pageSize,
                handleSizeChange,
                handleCurrentChange,
                onEdit,
                onOpenAdd,
                addRef,
                // editRef,
                listApi,
                Search,
                submitReset,
                onDeleteAll,
                handleSelectionChange,
                warning,
                danger,
                listQuery,
                onRowDel,
                total,
                onMyAdd,
                onSelectItem
            };
        },
    });
</script>
<style scoped lang="scss">
    .table_Box {
        padding: 20px;
        background-color: #fff;
    }

    .tableForm {
        margin-top: 10px;
    }

    /*按钮行*/
    .button_Line {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    //分页
    .pages {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
    }

    ::v-deep .el-pagination .el-pager li {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }

    ::v-deep .el-pagination .el-pager li.is-active {
        background-color: #409eff;
        color: #fff;
    }

    ::v-deep .el-pagination .btn-prev {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }

    ::v-deep .el-pagination button:disabled {
        color: #c0c4cc;
    }

    ::v-deep .el-pagination .btn-next {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }
</style>

 src/views/contingencyManagement/abolishDialog/abolishDialog.vue

对比新文件
@@ -0,0 +1,139 @@
<template>
  <div class="system-user-container">
  <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
  <div class="box">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#ebeef5"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item index="1">表单信息</el-menu-item>
      <el-menu-item index="2">流程图</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == 1" class="navType">
      <formInformationTop v-if="false"></formInformationTop>
      <formInformationTops></formInformationTops>
    </div>
    <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
      <div class="title2">流程图
        <img src="src">
      </div>
      <div style="width:100%;height:400px"></div>
    </div>
  </div>
  <lowerPlate></lowerPlate>
  <div class="btns">
    <el-button type="primary">启动</el-button>
  </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import formInformationTop from './component/formInformationTop.vue'
import formInformationTops from './component/formInformationTops.vue'
import lowerPlate from './component/lowerPlate.vue'
export default defineComponent({
  components:{lowerPlate,formInformationTop,formInformationTops},
  setup() {
    const activeIndex = ref('1');
    const handleSelect = (key: string, keyPath: string[]) => {
      // console.log(key, keyPath);
      activeIndex.value = key;
    };
    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    });

    const router=useRouter()
    const Type=onMounted(()=>{
      // console.log("xxxxxxx",router)
    })

    return {
      activeIndex,
      handleSelect,
      form,
      router,
      Type
    };
  },
});
</script>
<style scoped>
.title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}
.box{
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
  background-color: #fff;
  padding: 15px;
}
.tiao{
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  margin: 30px 0 ;
  position: relative;
}
.typeS{
  width: 80px;
  background-color: #fff;
  position: absolute;
  left: 30px;
  top: -9px;
  font-size: 14px;
  text-align: center;
}
.logoColor{
  background-color: #67c23a;
  color: #fff;
  padding:  5px 8px;
  border-radius: 5px;
  margin-right: 5px;
}
.btns{
  width: 100%;
  padding:20px 0;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  left: 0px;
  text-align: center;
  box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);

}
.title2{
  padding: 20px 0 20px 10px;
  width: 100%;
  border: 1px solid #dcdfe6;
}

/*弹窗底部边框线*/
::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;
}
</style>

 src/views/contingencyManagement/abolishDialog/component/formInformationTop.vue

对比新文件
@@ -0,0 +1,144 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" style="padding: 0 20px">
            <el-tab-pane label="考核指标" name="1">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="70" />
                    <el-table-column align="center" prop="date" label="责任部门" />
                    <el-table-column align="center" prop="name" label="考核指标" />
                    <el-table-column align="center" prop="address" label="制定部门" />
                    <el-table-column align="center" prop="address" label="制定日期" />
                    <el-table-column align="center"  label="检查值">
                        <template #default>
                         <el-input v-model="form.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="检查人" />
                    <el-table-column align="center" prop="address" label="检查时间" />
                </el-table>
                <div class="tiao">
                 <div class="typeS">审批</div>
                </div>
                <el-row style="padding:20px 0">
                    <el-col :span="6" style="text-align:right">一级审批：</el-col>
                    <el-col :span="18">同意</el-col>
                </el-row>
                <el-row style="padding:0 0 20px 0">
                    <el-col :span="6"></el-col>
                    <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
</template>
<script lang="ts">
import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
            const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
            const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const activeName = ref('1');
        return{
            form,
            tableData,
            activeName
        }
    },
})
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0 ;
}
</style>

 src/views/contingencyManagement/abolishDialog/component/formInformationTops.vue

对比新文件
@@ -0,0 +1,318 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案名称">
                    <el-input v-model="form.name" disabled placeholder="请填写预案名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="适用部门">
          <el-tree-select
              class="select"
              placeholder="请选择"
              v-model="value"
              :data="data"
              :render-after-expand="false"
              show-checkbox
              multiple
              clearable
              disabled
          />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案类型">
          <el-select class="select" v-model="form.region" disabled placeholder="请选择">
            <el-option label="综合应急预案" value="shanghai" />
            <el-option label="现场处置方案" value="beijing" />
            <el-option label="专项应急预案" value="shanghai" />
            <el-option label="其它预案" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="危险源关联">
          <el-select class="select" v-model="form.region" disabled placeholder="请选择">
            <el-option label="是" value="shanghai" />
            <el-option label="否" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案级别">
          <el-select class="select" v-model="form.region" disabled placeholder="请选择">
            <el-option label="公司及" value="shanghai" />
            <el-option label="分厂级" value="beijing" />
            <el-option label="车间级" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="编写人">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" @click="openUser" disabled/>
            </template>
          </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="编写部门" disabled placeholder="请选择">
          <el-tree-select
              class="select"
              v-model="value2"
              :data="dataSelect"
              :render-after-expand="false"
              multiple
              check-strictly
              check-on-click-node
              clearable
              disabled
          />
                </el-form-item>
            </el-col>
      <el-col :span="12">
        <el-form-item label="发布实施日期">
          <el-date-picker v-model="datetime" type="datetime" disabled placeholder="选择日期时间" style="width: 100%" />
        </el-form-item>
      </el-col>
        </el-row>
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" disabled/>
            </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"
              disabled
          >
            <el-button type="primary" disabled
            >点击上传</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="telephone">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" disabled @click="regionsDialog"/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
  <checkTemplate ref="ShowRef"/>
  <userSelections ref="userRef"/>
  <RegionsDialog ref="openRef"/>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue';
import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from "/@/components/checkTemplate/index.vue"
import RegionsDialog from "/@/components/regionsDialog/index.vue";
export default defineComponent({
  components: {
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },
    setup() {
        const form = reactive({
            name: '',
      value: '',
      value2: '',
      teamLeader: '',

      // data: '',
      // dataSelect: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });

    // 可选择树形选择框
    const value = ref()

    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 树形选择框
    const value2 = ref()

    const dataSelect = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 应急队伍弹窗
    const ShowRef=ref()
    const daiInpt=()=>{
      ShowRef.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开编写人选择用户弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 日期选择
    const datetime = ref('')
        return {
            form,
      value,
      data,
      value2,
      dataSelect,
      openUser,
      userRef,
      Search,
      ShowRef,
      daiInpt,
      openRef,
      datetime,
      regionsDialog,
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao {
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0;
    position: relative;
}
.typeS {
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor {
    background-color: #67c23a;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns {
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0;
}
.select{
  width: 100%;
}
.select ::v-deep .el-select{
  width: 100%;
}
</style>

 src/views/contingencyManagement/abolishDialog/component/lowerPlate.vue

对比新文件
@@ -0,0 +1,120 @@
<template>
    <div class="box">
        <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="15">
                    <el-form-item label="流程标题">
                        <el-input v-model="form.names" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="下级审批日期">
                        <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                            <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.delivery">
                <el-col :span="15">
                    <el-form-item label="抄送给" prop="resource">
                        <el-input v-model="form.resource" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                        <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.type">
                <el-col :span="15">
                    <el-form-item label="指定" prop="desc">
                        <el-input v-model="form.desc" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <DailogSearchUser ref="ShowUser"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
import { Search } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
    components:{DailogSearchUser},
    setup() {
        const formS=ref<FormInstance>()
        let form = reactive({
            names: '',
            region: '',
            date1: '',
            date2: '',
            delivery: "",
            type: "",
            resource: '',
            desc: '',
        });
        const typeChang=()=>{
         console.log('tag',form)
        }
        const rules = reactive<FormRules>({
  resource: [
    {
      type: 'array',
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ],
  desc: [
    {
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ]})
  const ShowUser=ref()
  const openDai =()=>{
   ShowUser.value.openDailog()
  }
        return {
            form,
            rules,
            formS,
            typeChang,
            ShowUser,
            openDai,
            Search,
        };
    },
});
</script>

<style scoped>
.box {
    margin: 30px 0 100px 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
    padding: 20px;
}
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue

对比新文件
@@ -0,0 +1,314 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="40%"
        draggable
        :fullscreen="full"
        @close="resetForm(ruleFormRef)"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          :rules="rules"
          :disabled="disabled"
          label-width="90px">
        <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.userName"
                  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="jobNumber">
              <el-input v-model="ruleForm.jobNumber" 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="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="gender">
              <el-radio-group v-model="ruleForm.gender">
                <el-radio :label="false">男</el-radio>
                <el-radio :label="true">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone" 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="position">
              <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
          <el-button size="default" type="primary" @click="addForm(ruleFormRef)">继续添加</el-button>
                    <el-button size="default" @click="resetForm(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>
    <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
  </div>
</template>

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

import type {
  FormRules,
  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 {contingencyApi} from "/@/api/contingencyManagement/contingency";

export default defineComponent({
  name: 'addTeamLeader',
  components: {
    // Search,
    DailogSearchUserManger
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = ref ({
      teamId: '',
      userUid: '',
      userName:'',
      gender: '',
      jobNumber: '', // 人员工号
      name: '', // 人员名称
      phone: '', // 手机号码
      position: '', // 职位
    });
    const rules = reactive<FormRules>({
      jobNumber: [
        {
          required: true,
          message: '人员工号不能为空',
          trigger: 'change',
        },
      ],
      personnelName: [
        {
          required: true,
          message: '人员名称不能为空',
          trigger: 'change',
        },
      ],
      personnelGender: [
        {
          required: true,
          message: '人员性别不能为空',
          trigger: 'change',
        },
      ],
      phone: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'change',
        },
      ],
      position: [
        {
          required: true,
          message: '职位不能为空',
          trigger: 'change',
        },
      ],
    })
    const titles = ref();
    const disabled = ref();
    //继续添加
    const addForm = (formEl: FormInstance | undefined) => {
      emit('myAdd', ruleForm.value);
      formEl.resetFields();
    }
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急队伍人员') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            // console.log('-------',ruleForm.value)
            // emit('myAdd', ruleForm.value);
            contingencyApi()
                .addEmergencyTeamPersonnel(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;
            contingencyApi()
                .editEmergencyTeamPersonnel(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 = {
          teamId: '',
          userUid: '',
          userName:'',
          gender: '',
          jobNumber: '', // 人员工号
          name: '', // 人员名称
          phone: '', // 手机号码
          position: '', // 职位
        };
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };

    // 打开弹窗
    const openDialog = (title: string, id: number,teamId:number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      ruleForm.value.teamId = teamId

      if (title == '查看应急队伍人员' || title == '修改应急队伍人员') {
        contingencyApi()
            .seeEmergencyTeamPersonnel(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.userUid=e[0].uid
      ruleForm.value.userName=e[0].realName
      ruleForm.value.gender=e[0].sex
      ruleForm.value.name=e[0].username
      ruleForm.value.jobNumber=e[0].jobNumber
      ruleForm.value.phone=e[0].phone
      ruleForm.value.position=e[0].position
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      // closeDialog,
      isShowDialog,
      ruleFormRef,
      // submitForm,
      // onCancel,
      ruleForm,
      rules,
      Search,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      openUser,
      userRef,
      onUser,
      addForm,
      submitForm,
    };
  },
});
</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;
}
</style>

 src/views/contingencyManagement/contingency/component/dialog.vue

对比新文件
@@ -0,0 +1,200 @@
<template>
  <div class="system-add-user-container">
    <el-dialog title="查看应急队伍管理" v-model="isShowDialog" width="769px">
      <el-form :model="ruleForm" size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="账户名称">
              <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户昵称">
              <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="关联角色">
              <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
                <el-option label="超级管理员" value="admin"></el-option>
                <el-option label="普通用户" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="部门">
              <el-cascader
                  :options="deptData"
                  :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
                  placeholder="请选择部门"
                  clearable
                  class="w100"
                  v-model="ruleForm.department"
              >
                <template #default="{ node, data }">
                  <span>{{ data.deptName }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号">
              <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="邮箱">
              <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="性别">
              <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="账户密码">
              <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="账户过期">
              <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户状态">
              <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="用户描述">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

// 定义接口来定义对象的类型
interface DeptData {
  deptName: string;
  createTime: string;
  status: boolean;
  sort: number | string;
  describe: string;
  id: number;
  children?: DeptData[];
}
interface UserState {
  isShowDialog: boolean;
  ruleForm: {
    userName: string;
    userNickname: string;
    roleSign: string;
    department: any;
    phone: string;
    email: string;
    sex: string;
    password: string;
    overdueTime: string;
    status: boolean;
    describe: string;
  };
  deptData: Array<DeptData>;
}

export default defineComponent({
  name: 'systemAddUser',
  setup() {
    const state = reactive<UserState>({
      isShowDialog: false,
      ruleForm: {
        userName: '', // 账户名称
        userNickname: '', // 用户昵称
        roleSign: '', // 关联角色
        department: [], // 部门
        phone: '', // 手机号
        email: '', // 邮箱
        sex: '', // 性别
        password: '', // 账户密码
        overdueTime: '', // 账户过期
        status: true, // 用户状态
        describe: '', // 用户描述
      },
      deptData: [], // 部门数据
    });
    // 打开弹窗
    const openDialog = () => {
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const onSubmit = () => {
      closeDialog();
    };
    // 初始化部门数据
    const initTableData = () => {
      state.deptData.push({
        deptName: 'vueNextAdmin',
        createTime: new Date().toLocaleString(),
        status: true,
        sort: Math.random(),
        describe: '顶级部门',
        id: Math.random(),
        children: [
          {
            deptName: 'IT外包服务',
            createTime: new Date().toLocaleString(),
            status: true,
            sort: Math.random(),
            describe: '总部',
            id: Math.random(),
          },
          {
            deptName: '资本控股',
            createTime: new Date().toLocaleString(),
            status: true,
            sort: Math.random(),
            describe: '分部',
            id: Math.random(),
          },
        ],
      });
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    return {
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      ...toRefs(state),
    };
  },
});
</script>

 src/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue

对比新文件
@@ -0,0 +1,240 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="修改应急队伍人员"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          :rules="rules"
          label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="选择人员" prop="selectPeople">
              <el-input
                  v-model="ruleForm.selectPeople"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                </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="jobNumber">
              <el-input v-model="ruleForm.jobNumber" 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="personnelName">
              <el-input v-model="ruleForm.personnelName" 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="personnelGender">
              <el-radio-group v-model="ruleForm.personnelGender">
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone" 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="position">
              <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button>
                    <el-button size="default" @click="onCancel">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

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

import {
  Search,
  FullScreen,
} from '@element-plus/icons-vue'
// 定义接口来定义对象的类型
interface DeptData {
  deptName: string;
  createTime: string;
  status: boolean;
  sort: number | string;
  describe: string;
  id: number;
  children?: DeptData[];
}

interface RuleFormRow {
  // teamName: string;
  // teamLevel: string;
  // teamLeader: string;
  // responsibleDepartment: any
  // teamPhone: string;
  // telephone: string;
  // describe: string;
  // selectPeople: string
}
interface UserState {
  isShowDialog: boolean;
  ruleForm: RuleFormRow;
  deptData: Array<DeptData>;
}
export default defineComponent({
  name: 'editTeamLeader',
  components: {
    // Search,
  },
  setup() {
    const state = reactive<UserState>({
      isShowDialog: false,
      ruleForm: {
        selectPeople:'', //选择人员
        jobNumber: '', // 人员工号
        phone: '', // 手机号码
        personnelGender: '', //人员性别
        position: '', //职位
        personnelName: '', // 人员名称
      },
      deptData: [], // 部门数据
    });
    // const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      // isShowDialog.value = true;
      state.ruleForm = row;
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      // isShowDialog.value = false;
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    const rules = reactive<FormRules>({
      selectPeople:[
        {
          required: true,
          message: '人员不能为空',
          trigger: 'change',
        },
      ],
      jobNumber: [
        {
          required: true,
          message: '人员工号不能为空',
          trigger: 'change',
        },
      ],
      personnelName: [
        {
          required: true,
          message: '人员名称不能为空',
          trigger: 'change',
        },
      ],
      personnelGender: [
        {
          required: true,
          message: '人员性别不能为空',
          trigger: 'change',
        },
      ],
      phone: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'change',
        },
      ],
      position: [
        {
          required: true,
          message: '职位不能为空',
          trigger: 'change',
        },
      ],
    })
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      // isShowDialog,
      ruleFormRef,
      submitForm,
      onCancel,
      rules,
      Search,
      ...toRefs(state),
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</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;
}
</style>

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

对比新文件
@@ -0,0 +1,503 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="resetForm(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" label-width="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="teamName">
                            <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="队伍级别" prop="teamLevel">
                            <el-select v-model="ruleForm.teamLevel" 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="principalName">
                            <el-input v-model="ruleForm.principalName" 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="principalDepartmentId">
                            <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data" class="w100"
                                            :props="propse" clearable 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="principalPhone">
                            <el-input v-model="ruleForm.principalPhone" 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="telephoneNumber">
                            <el-input v-model="ruleForm.telephoneNumber" 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="teamDesc">
                            <el-input class="textarea" v-model="ruleForm.teamDesc" type="textarea" maxlength="150"
                                      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="fileList">
                            <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-row>
            </el-form>
            <el-row :gutter="35">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="应急队伍人员" name="first" >
                            <el-button type="primary" size="default" @click="onAddEmergencyPersonnel" :disabled="disabled">新增
                            </el-button>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%; margin-top: 15px"
                                    ref="multipleTableRef"
                                    :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
                                    :disabled="disabled"
                            >
                                <el-table-column prop="jobNumber" label="人员工号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="name" label="人员名称" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
                                <el-table-column label="操作" width="250" align="center">
                                    <template #default="scope">
                                        <el-button :disabled="disabled" size="small" @click="onEdit('查看应急队伍人员',scope.row.id)">查看
                                        </el-button>
                                        <el-button :disabled="disabled" size="small" @click="onEdit('修改应急队伍人员',scope.row.id)"
                                                   style="margin-right: 5px">编辑
                                        </el-button>
                                        <el-button :disabled="disabled" size="small" @click="onRowDel(scope.row.id)"
                                                   style="margin-right: 5px">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" v-if="disabled == true ? false : true" type="primary"
                               @click="onSubmit(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <AddEmergencyPersonnel ref="addRef" @myAdd="onMyAdd"/>
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
    </div>
</template>

<script lang="ts">
    import {
        reactive,
        ref,
        defineComponent,
        onMounted,
        // toRefs,
    } from 'vue';
    import {
        ElMessage,
        ElMessageBox,
    } from 'element-plus';

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

    import {
        Search,
        FullScreen
    } from '@element-plus/icons-vue'
    import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
    import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
    import {contingencyApi} from "/@/api/contingencyManagement/contingency";
    import {goalManagementApi} from "/@/api/goalManagement";
    // import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";


    export default defineComponent({
        name: 'openAdd',
        components: {
            AddEmergencyPersonnel,
            DailogSearchUserManger,
        },
        setup(prop, {emit}) {
            const isShowDialog = ref(false);
            const ruleFormRef = ref<FormInstance>();
            const ruleForm = ref({
                teamName: '', // 队伍名称
                teamLevel: '', // 队伍级别
                principalUid: '', // 队伍负责人
                principalName: '',
                principalDepartmentId: '',  //负责人部门
                principalPhone: '', // 负责人手机
                telephoneNumber: '', // 固定电话
                teamDesc: '',  //队伍描述
                fileList: [
                    {
                        fileUrl: 'url',
                        fileName: 'name',
                    }
                ],
                memberList: []
            });
            const titles = ref();
            const disabled = ref();
            const peopleInsertBtn = ref(false)
            const teamId = ref()
            // 打开弹窗
            const openDialog = (title: string, id: number, type: boolean) => {
                isShowDialog.value = true;
                titles.value = title;
                disabled.value = type;
                teamId.value = id
                //如果是新增  无法添加人员
                if(title == '新建应急队伍管理'){
                    peopleInsertBtn.value = true
                }else{
                    peopleInsertBtn.value = false
                }
                if (title == '查看应急队伍管理' || title == '修改应急队伍管理') {
                    contingencyApi()
                        .seeEmergencyTeam(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ruleForm.value = res.data.data;
                                listApi()
                            }
                        });
                }
            }
            // 上传附件
            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 principalDepartmentId = ref()
            const propse = {
                label: 'depName',
                children: 'children',
                value: 'depId',
            };
            const data = ref()
            onMounted(() => {
                department();
            });
            // 打开用户选择弹窗
            const userRef = ref();
            const openUser = () => {
                userRef.value.openDailog();
            };
            const onUser = (e: any) => {
                ruleForm.value.principalUid = e[0].uid
                ruleForm.value.principalName = e[0].realName
            };
            //定义tabs切换
            const activeName = ref('first')
            const handleClick = (tab: TabsPaneContext, event: Event) => {
                console.log(tab, event)
            }

            // 必填项提示
            const rules = reactive<FormRules>({
                teamName: [
                    {
                        required: true,
                        message: '队伍名称不能为空',
                        trigger: 'change',
                    },
                ],
                teamLevel: [
                    {
                        required: true,
                        message: '队伍级别不能为空',
                        trigger: 'change',
                    },
                ],
                principalUid: [
                    {
                        required: true,
                        message: '队伍负责人不能为空',
                        trigger: 'change',
                    },
                ],
                principalDepartmentId: [
                    {
                        required: true,
                        message: '负责人部门不能为空',
                        trigger: 'change',
                    },
                ],
                principalPhone: [
                    {
                        required: true,
                        message: '负责人手机不能为空',
                        trigger: 'change',
                    },
                ],
                telephoneNumber: [
                    {
                        required: true,
                        message: '固定电话不能为空',
                        trigger: 'change',
                    },
                ],
            })
            //全屏
            const full = ref(false);
            const toggleFullscreen = () => {
                if (full.value == false) {
                    full.value = true;
                } else {
                    full.value = false;
                }
            };
            const onSubmit = async (title: string, formEl: FormInstance | undefined) => {
                if (title == '新建应急队伍管理') {
                    if (!formEl) return;
                    await formEl.validate((valid, fields) => {
                        if (valid) {
                            isShowDialog.value = false;
                            contingencyApi()
                                .addEmergencyTeam(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;
                            contingencyApi()
                                .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 = {
                        teamName: '', // 队伍名称
                        teamLevel: '', // 队伍级别
                        principalUid: '', // 队伍负责人
                        principalDepartmentId: '',  //负责人部门
                        principalPhone: '', // 负责人手机
                        telephoneNumber: '', // 固定电话
                        teamDesc: '',  //队伍描述
                        fileList: [
                            {
                                fileUrl: 'url',
                                fileName: 'name',
                            }
                        ],
                        memberList: []
                    };
                }
            };
            const resetForm = (formEl: FormInstance | undefined) => {
                isShowDialog.value = false;
                if (!formEl) return;
                formEl.resetFields();
                tableData.value=[]
            };
            // 定义表格数据
            const tableData = ref([]);
            //添加队伍负责人弹窗
            const addRef = ref();
            const onAddEmergencyPersonnel = () => {
                //未添加队伍 无法修改人员
                if(peopleInsertBtn.value == true){
                    ElMessage({
                        showClose: true,
                        message: '请先添加应急队伍',
                        type: 'warning',
                    });
                }else {
                    addRef.value.openDialog('新建应急队伍人员','',teamId.value);
                }

            };
            // 请求列表数据
            const listApi = async () => {
                let res = await contingencyApi().getEmergencyTeamPersonnelList(teamId.value);
                if (res.data.code == 200) {
                    tableData.value = res.data.data;
                } else {
                    ElMessage.error(res.data.msg);
                }
            };
            // 新增后刷新
            const onMyAdd = (e: object) => {
                listApi();
                // console.log(e)
                // item.value = e
                // tableData.value.push(item.value)
                // console.log(tableData)
            };
            // 打开修改弹窗
            const onEdit = (val: string, row: object) => {
                if (val == '查看应急队伍人员') {
                    addRef.value.openDialog('查看应急队伍人员', row,teamId.value, true);
                } else {
                    addRef.value.openDialog('修改应急队伍人员', row,teamId.value, false);
                }
            };
            // 删除
            const onRowDel = (data: any) => {
                ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    contingencyApi()
                        .deleteEmergencyTeamPersonnel(data)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi()
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi()
                            }
                        });
                })
                    .catch(() => {
                    });
            };
            return {
                openDialog,
                fileList,
                principalDepartmentId,
                data,
                activeName,
                handleClick,
                tableData,
                Search,
                resetForm,
                isShowDialog,
                ruleFormRef,
                ruleForm,
                rules,
                addRef,
                userRef,
                titles,
                disabled,
                propse,
                emit,
                onSubmit,
                openUser,
                onAddEmergencyPersonnel,
                toggleFullscreen,
                FullScreen,
                full,
                onUser,
                onMyAdd,
                listApi,
                onEdit,
                onRowDel,
                department,
                peopleInsertBtn,
                teamId
            };
        },
    });
</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;
    }
</style>


 src/views/contingencyManagement/contingency/component/openSee.vue

对比新文件
@@ -0,0 +1,425 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="title"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          :model="ruleForm"
          size="default"
          :rules="rules"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="队伍名称" prop="teamName">
              <el-input v-model="ruleForm.teamName" :disabled="true"></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="teamLevel">
              <el-select v-model="ruleForm.teamLevel" :disabled="true" class="w100">
                <el-option label="公司" value="admin"></el-option>
                <el-option label="分厂-车间" value="common"></el-option>
                <el-option label="工序-班组等" value="shang"></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="principalUid">
              <el-input
                  v-model="ruleForm.principalUid"
                  placeholder="Please input"
                  class="input-with-select"
                  :disabled="true"
              >
                <template #append>
                  <el-button :icon="Search"/>
                </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="principalDepartmentId">
              <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data"  :disabled="true" class="w100"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人手机" prop="principalPhone">
              <el-input v-model="ruleForm.principalPhone" :disabled="true"></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="telephoneNumber">
              <el-input v-model="ruleForm.telephoneNumber" :disabled="true"></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="teamDesc">
              <el-input class="textarea" v-model="ruleForm.teamDesc" type="textarea" :disabled="true" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="相关附件" prop="fileList">
              <el-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" disabled
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="应急队伍人员" name="first">
                <el-button type="primary" size="default" disabled>新增</el-button>
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-top: 15px;"
                    ref="multipleTableRef"
                    :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
                >
                  <el-table-column prop="jobNo" label="人员工号" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="personnelName" label="人员名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                      <el-button disabled size="small" text="plain" >查看
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
                </span>
      </template>
    </el-dialog>
<!--    <AddTeamLeader ref="addRef" />-->
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue';
import type {
  UploadUserFile,
  TabsPaneContext,
  FormRules,
} from 'element-plus'
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
// import AddTeamLeader from '/@/views/contingency/component/addEmergencyPersonnel.vue';
// 定义接口来定义对象的类型
interface MenuDataTree {
  id: number;
  label: string;
  children?: MenuDataTree[];
}

// 定义表格数据类型
interface User {
  personnelName: string
  jobNo: string
  phone: string;
  position: string;
}

interface RoleState {
  title:string,
  // buttonName:string,
  isShowDialog: boolean;
  ruleForm: {
    teamName: string;
    teamLevel: string;
    principalUid: number;
    principalDepartmentId: number;
    principalPhone: string;
    telephoneNumber: string;
    teamDesc: string;
    fileList: string,
  };
  menuData: Array<MenuDataTree>;
}
export default defineComponent({
  name: 'openSee',
  components: {
    // Search,
  },
  setup() {
    const state = reactive<RoleState>({
      isShowDialog: false,
      title:'',
      // buttonName:'',
      ruleForm: {
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        principalUid: 1, // 队伍负责人
        principalDepartmentId: 2,  //负责人部门
        principalPhone: '', // 负责人手机
        telephoneNumber: '', // 固定电话
        teamDesc: '',  //队伍描述
        fileList: [],
      },
      menuData: [],
    });
    // 打开弹窗
    const openDialog = (type: string, value: any) => {
      state.isShowDialog = true;
      if(type === '查看'){
        state.title = '查看应急队伍管理'
        // state.buttonName = '新增'
        state.ruleForm = {
          teamName: '', // 队伍名称
          teamLevel: '', // 队伍级别
          principalUid: 1, // 队伍负责人
          principalDepartmentId: 2,  //负责人部门
          principalPhone: '', // 负责人手机
          telephoneNumber: '', // 固定电话
          teamDesc: '',  //队伍描述
          fileList: [],
        }
      }else{
        // state.title = '修改应急队伍管理'
        // // state.buttonName = '确定'
        // state.ruleForm = JSON.parse(JSON.stringify(value))
      }
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // // 初始化部门数据
    // const initTableData = () => {
    //   state.deptData.push({
    //     deptName: 'vueNextAdmin',
    //     createTime: new Date().toLocaleString(),
    //     status: true,
    //     sort: Math.random(),
    //     describe: '顶级部门',
    //     id: Math.random(),
    //     children: [
    //       {
    //         deptName: 'IT外包服务',
    //         createTime: new Date().toLocaleString(),
    //         status: true,
    //         sort: Math.random(),
    //         describe: '总部',
    //         id: Math.random(),
    //       },
    //       {
    //         deptName: '资本控股',
    //         createTime: new Date().toLocaleString(),
    //         status: true,
    //         sort: Math.random(),
    //         describe: '分部',
    //         id: Math.random(),
    //       },
    //     ],
    //   });
    // };
    // // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])

    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '经营班子',
            children: [],
          },
        ],
      },
      {
        value: '2',
        label: '生产运行部',
        children: [
          {
            value: '2-1',
            label: '灌装一班',
            children: []
          },
          {
            value: '2-2',
            label: '工艺四班',
            children: [],
          },
        ],
      },
      {
        value: '3',
        label: '设备部',
        children: [
          {
            value: '3-1',
            label: '仪表班',
            children: [],
          },
          {
            value: '3-2',
            label: '机修班',
            children: [],
          },
        ],
      },
    ]
    //定义tabs切换
    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }

    //定义表格数据
    const multipleSelection = ref<User[]>([])
    const tableData: User[] = [
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      }
    ]

    // 必填项提示
    const rules = reactive<FormRules>({
      teamName: [
        {
          required: true,
          message: '队伍名称不能为空',
          trigger: 'change',
        },
      ],
      teamLevel: [
        {
          required: true,
          message: '队伍级别不能为空',
          trigger: 'change',
        },
      ],
      principalUid: [
        {
          required: true,
          message: '队伍负责人不能为空',
          trigger: 'change',
        },
      ],
      principalDepartmentId: [
        {
          required: true,
          message: '负责人部门不能为空',
          trigger: 'change',
        },
      ],
      principalPhone: [
        {
          required: true,
          message: '负责人手机不能为空',
          trigger: 'change',
        },
      ],
      telephoneNumber: [
        {
          required: true,
          message: '固定电话不能为空',
          trigger: 'change',
        },
      ],
    })
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if(full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      activeName,
      handleClick,
      tableData,
      multipleSelection,
      Search,
      // addRef,
      // onAddTeamLeader,
      ...toRefs(state),
      toggleFullscreen,
      FullScreen,
      full,
      rules,
    };
  },
});
</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;
}
</style>

 src/views/contingencyManagement/contingency/component/upData.vue

对比新文件
@@ -0,0 +1,125 @@
<template>
  <el-dialog
      v-model="dialogVisible"
      title="导入Excel"
      width="50%"
      draggable
      :fullscreen="full"
  >
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="3"
        :on-exceed="handleExceed"
    >
      <el-button size="default">下载模板</el-button>
      <el-button size="default" type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只允许导入“xls”或“xlsx”格式文件！
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script lang="ts">
import { ref,
  defineComponent,
} from "vue";
import {
  ElMessage,
  ElMessageBox
} from "element-plus";
import type {
  UploadProps,
  UploadUserFile,
} from "element-plus";
import {
  FullScreen
} from '@element-plus/icons-vue'
export default defineComponent({
  setup() {
    let dialogVisible =ref<boolean>(false)
    const fileList = ref<UploadUserFile[]>([
      // {
      //   name: "element-plus-logo.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
      // {
      //   name: "element-plus-logo2.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
    ]);

    const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
      console.log(file, uploadFiles);
    };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      console.log(uploadFile);
    };

    const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
      ElMessage.warning(
          `The limit is 3, you selected ${
              files.length
          } files this time, add up to ${
              files.length + uploadFiles.length
          } totally`
      );
    };

    const beforeRemove: UploadProps["beforeRemove"] = (
        uploadFile,
        uploadFiles
    ) => {
      return ElMessageBox.confirm(
          `Cancel the transfert of ${uploadFile.name} ?`
      ).then(
          () => true,
          () => false
      );
    };
    // 打开弹窗
    const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
      dialogVisible.value=true
    }
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      dialogVisible,
      fileList,
      handleRemove,
      handlePreview,
      handleExceed,
      beforeRemove,
      openDialog,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.el-upload__tip{
  margin-left: 100px;
  margin-top: 20px;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid #e8e8e8;
}
</style>

 src/views/contingencyManagement/contingency/index.vue

对比新文件
@@ -0,0 +1,389 @@
<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.teamName" placeholder="队伍名称"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="default" v-model="listQuery.searchParams.teamType" placeholder="请选择队伍级别">
              <el-option label="公司" value="shanghai"></el-option>
              <el-option label="分厂-车间" value="beijing"></el-option>
              <el-option label="工序-班组等" value="beijing"></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>
        </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="teamName" label="队伍名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDesc" label="队伍描述" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="principalPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </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"
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
            class="mt15"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            v-model:currentPage="pageIndex"
            background
            v-model:page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <OpenAdd ref="addRef"  @myAdd="onMyAdd" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  // Upload,
  // Download,
  // Refresh,
  View,
  EditPen,
} from '@element-plus/icons-vue'
// import OpenAdd from '/@/views/contingencyManagement/contingency/component/openAdd.vue';
// import OpenSee from '/@/views/contingencyManagement/contingency/component/openSee.vue';

import OpenAdd from '../../contingencyManagement/contingency/component/openAdd.vue'
import UpData from '../../contingencyManagement/contingency/component/upData.vue';
import {contingencyApi} from "../../../api/contingencyManagement/contingency";

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    // Upload,
    // Download,
    // Refresh,
    UpData,
    contingencyApi
  },
  setup() {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        teamName: "",
        teamType: "",
      }
    })
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const onSubmit = async () => {
      let res = await contingencyApi().getTeamManagementList(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.teamName = '';
      listQuery.searchParams.teamType = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    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 upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 打开新增应急队伍弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急队伍管理');
    };
    // 新增后刷新
    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 onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        contingencyApi()
          .deleteEmergencyTeam([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 onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            contingencyApi()
                .deleteEmergencyTeam(deleteAll.value)
                .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 pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      onSubmit();
    };
    const onHandleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 页面加载时
    onMounted(() => {
      onSubmit();
    });
    return {
      listQuery,
      onSubmit,
      // upButton,
      // upShow,
      onOpenAdd,  //新增
      addRef,
      pageIndex,
      pageSize,
      total,
      onEdit,
      handleSelectionChange,
      submitReset,
      onRowDel,
      onMyAdd,
      tableData,
      onDeleteAll,
      onHandleSizeChange,
      onHandleCurrentChange,
      deleteAll,
      warning,
      danger,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
  .button_Line{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.el-form .el-form-item{
  margin-bottom: 0px!important;
}
//弹窗底部边框线
::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;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
</style>

 src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue

对比新文件
@@ -0,0 +1,841 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="900px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练名称" prop="emergencyPlanName">
              <el-input :disabled="true" v-model="ruleForm.emergencyPlanName" 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="drillAddress">
              <el-input :disabled="true" v-model="ruleForm.drillAddress" placeholder="请填写队伍名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="主办部门"  placeholder="请选择" prop="departmentId">
              <!--<el-tree-select-->
                  <!--v-model="ruleForm.departmentId"-->
                  <!--:data="data" class="w100"-->
                  <!--placeholder="请选择"/>-->

              <el-tree-select :disabled="true" v-model="ruleForm.departmentId"
                              :data="newTreeList" :props="propse" class="w100" placeholder="请选择" />
            </el-form-item>

          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练方式" prop="drillWay">
              <el-select :disabled="true" v-model="ruleForm.drillWay" class="w100" placeholder="请选择">
                <el-option label="综合" value="0"></el-option>
                <el-option label="桌面" value="1"></el-option>
                <el-option label="专项" value="2"></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="drillName" >
              <el-input
                  :disabled="true"
                  v-model="ruleForm.drillName"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练级别" prop="drillLevel">
              <el-select :disabled="true" v-model="ruleForm.drillLevel" class="w100" placeholder="请选择">
                <el-option label="公司级" value="1"></el-option>
                <el-option label="分厂级" value="2"></el-option>
                <el-option label="车间级" value="3"></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="makingPlanDate">
              <el-date-picker :disabled="true" v-model="ruleForm.makingPlanDate"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划演练日期" prop="drillPlanDate">
              <el-date-picker :disabled="true" v-model="ruleForm.drillPlanDate"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="updateDate">
              <el-date-picker :disabled="true" v-model="ruleForm.updateDate" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="makingUserUid">
              <el-input :disabled="true" v-model="ruleForm.makingUserName" 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="makingDepartmentId">
              <!--<el-tree-select-->
                  <!--v-model="ruleForm.makingDepartmentId"-->
                  <!--:data="data" class="w100"-->
                  <!--placeholder="请选择"/>-->

              <el-tree-select :disabled="true" v-model="ruleForm.makingDepartmentId"
                              :data="newTreeList" :props="propse" class="w100" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练人员" prop="planUserListString" >
              <el-input
                  :disabled="true"
                  v-model="ruleForm.planUserListString"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="openUser"/>
                </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="演练目的" prop="purpose">
              <el-input
                  :disabled="true"
                  v-model="ruleForm.purpose"
                  placeholder="请填写演练目的"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </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="chargeUserListString" >
              <el-input
                  :disabled="true"
                  v-model="ruleForm.chargeUserListString"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :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="insuranceMeasures">
              <el-input :disabled="true" v-model="ruleForm.insuranceMeasures" 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="drillExpense">
              <el-input :disabled="true" v-model="ruleForm.drillExpense" 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="remark">
              <el-input
                  :disabled="true"
                  v-model="ruleForm.remark"
                  placeholder="请填写备注信息"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
            <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="executeUserListString" >
              <el-input
                  v-model="ruleForm.executeUserListString"
                  placeholder="请选择"
                  class="input-with-select"
                  :disabled="true"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser"/>
                </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="演练过程描述" prop="processDesc">
              <el-input :disabled="true" v-model="ruleForm.processDesc" class="textarea" type="textarea" 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="recordUserName" >
              <el-input
                  v-model="ruleForm.recordUserName"
                  placeholder="请选择"
                  class="input-with-select"
                  :disabled="true"
              >
                <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="drillRecordDate">
              <el-date-picker
                  v-model="ruleForm.drillRecordDate"
                  class="w100"
                  type="datetime"
                  placeholder="选择日期时间"
                  :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <div class="el-divider--horizontal">
              <div class="el-divider__text">
                <h3>评价</h3>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练负责人" prop="evaluationUserListString" >
              <el-input
                  v-model="ruleForm.evaluationUserListString"
                  placeholder="请选择"
                  class="input-with-select"
                  :disabled="disabled"
              >
                <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="suitable">
              <el-select :disabled="disabled" v-model="ruleForm.suitable" class="w100" placeholder="请选择">
                <el-option label="全部能够执行" value="1"></el-option>
                <el-option label="全部不能够执行" value="2"></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="sufficient">
              <el-select :disabled="disabled" v-model="ruleForm.sufficient" class="w100" placeholder="请选择">
                <el-option label="完全满足应急要求" value="1"></el-option>
                <el-option label="不完全满足应急要求" value="2"></el-option>
                <el-option label="完全不满足应急要求" value="3"></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="arrival">
              <el-select :disabled="disabled" v-model="ruleForm.arrival" class="w100" placeholder="请选择">
                <el-option label="迅速准确，基本按时到位" value="1"></el-option>
                <el-option label="未按时到位" value="2"></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="supplies">
              <el-select :disabled="disabled" v-model="ruleForm.supplies" class="w100" placeholder="请选择">
                <el-option label="现场物资充分，全部有效" value="1"></el-option>
                <el-option label="现场物资不充分" value="2"></el-option>
                <el-option label="现场没有物资" value="3"></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="protection">
              <el-select :disabled="disabled" v-model="ruleForm.protection" class="w100" placeholder="请选择">
                <el-option label="全部人员防护到位" value="1"></el-option>
                <el-option label="人员未防护到位" value="2"></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="whole">
              <el-select :disabled="disabled" v-model="ruleForm.whole" class="w100" placeholder="请选择">
                <el-option label="协调基本顺利，能够满足要求" value="1"></el-option>
                <el-option label="协调不顺利" value="2"></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="division">
              <el-select :disabled="disabled" v-model="ruleForm.division" class="w100" placeholder="请选择">
                <el-option label="安全，快速" value="1"></el-option>
                <el-option label="安全，不快速" value="2"></el-option>
                <el-option label="不安全，快速" value="3"></el-option>
                <el-option label="不安全，不快速" value="4"></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="effect">
              <el-select :disabled="disabled" v-model="ruleForm.effect" class="w100" placeholder="请选择">
                <el-option label="基本达到目的，部分环节有待改进" value="1"></el-option>
                <el-option label="未达到目的" value="2"></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="report">
              <el-select :disabled="disabled" v-model="ruleForm.report" class="w100" placeholder="请选择">
                <el-option label="报告及时" value="1"></el-option>
                <el-option label="报告不及时" value="2"></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="safety">
              <el-select :disabled="disabled" v-model="ruleForm.safety" class="w100" placeholder="请选择">
                <el-option label="按要求协作" value="1"></el-option>
                <el-option label="未按要求协作" value="2"></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="rescue">
              <el-select :disabled="disabled" v-model="ruleForm.rescue" class="w100" placeholder="请选择">
                <el-option label="按要求协作" value="1"></el-option>
                <el-option label="未按要求协作" value="2"></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="evacuate">
              <el-select :disabled="disabled" v-model="ruleForm.evacuate" class="w100" placeholder="请选择">
                <el-option label="按要求配合" value="1"></el-option>
                <el-option label="未按要求配合" value="2"></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="needModify">
              <el-select :disabled="disabled" v-model="ruleForm.needModify" class="w100" placeholder="请选择">
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="存在问题和改进措施" prop="questionAndImprove">
              <el-input :disabled="disabled" v-model="ruleForm.questionAndImprove" class="textarea" 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="modifyContent">
              <el-input :disabled="disabled" v-model="ruleForm.modifyContent" class="textarea" 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="附件列表">
              <el-upload
                  v-model:file-list="ruleForm.userList"
                  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-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button v-if="!disabled" size="default" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <RegionsDialog ref="Shows" @SearchUser="onUser"/>
    <DailogSearchUser ref="userRef" @SearchUser="selectUser"/>
<!--    <RegionsDialog ref="openRef"/>-->
  </div>
</template>

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

import {
  UploadUserFile,
  FormInstance,
  ElMessage
} from 'element-plus'
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import {emergencyDrillEvaluationApi} from "/@/api/contingencyManagement/emergencyDrillEvaluation";
import {goalManagementApi} from "/@/api/goalManagement";
export default defineComponent({
  name: 'approvalProgress',
  components: {
    UserSelections,
    RegionsDialog,
    DailogSearchUser
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      drillPlanId: '',
      suitable: '',
      sufficient: '',
      arrival: '',
      supplies: '',
      protection: '',
      whole: '',
      division: '',
      effect: '',
      report: '',
      safety: '',
      rescue: '',
      evacuate: '',
      needModify: '',
      questionAndImprove: '',
      modifyContent: '',
      fileList: [
        {
          fileName: 'name',
          fileUrl: 'url',
        }
      ],
      userList: [
      ]
    });
    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 == '查看演练实施评价') {
        emergencyDrillEvaluationApi()
            .seeEmergencyDrillEvaluation(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
                ruleForm.value.planUserListString=''
                ruleForm.value.chargeUserListString=''
                ruleForm.value.executeUserListString=''
                ruleForm.value.evaluationUserListString=''
                //演练人员
                for(var a = 0;a<res.data.data.planUserList.length;a++){
                  ruleForm.value.planUserListString += res.data.data.planUserList[a].userName+';'
                }
                //演练负责人员
                for(var a = 0;a<res.data.data.planChargeUserList.length;a++){
                  ruleForm.value.chargeUserListString += res.data.data.planChargeUserList[a].userName+';'
                }
                //实际到场人员
                for(var a = 0;a<res.data.data.executeUserList.length;a++){
                  ruleForm.value.executeUserListString += res.data.data.executeUserList[a].userName+';'
                }
                //演练负责人(评价)
                for(var a = 0;a<res.data.data.evaluationUserList.length;a++){
                  ruleForm.value.evaluationUserListString += res.data.data.evaluationUserList[a].userName+';'
                }
              }
            });
      }
      if(title=='演练实施评价'){
        emergencyDrillEvaluationApi()
                .seeEmergencyDrillEvaluation(id)
                .then((res) => {
                  if (res.data.code == 200) {
                    ruleForm.value = res.data.data;
                    ruleForm.value.planUserListString=''
                    ruleForm.value.chargeUserListString=''
                    ruleForm.value.executeUserListString=''
                    ruleForm.value.evaluationUserListString=''
                    for(var a = 0;a<res.data.data.planUserList.length;a++){
                      ruleForm.value.planUserListString += res.data.data.planUserList[a].userName+';'
                    }
                    for(var a = 0;a<res.data.data.planChargeUserList.length;a++){
                      ruleForm.value.chargeUserListString += res.data.data.planChargeUserList[a].userName+';'
                    }
                    for(var a = 0;a<res.data.data.executeUserList.length;a++){
                      ruleForm.value.executeUserListString += res.data.data.executeUserList[a].userName+';'
                    }
                    //演练负责人(评价)
                    for(var a = 0;a<res.data.data.evaluationUserList.length;a++){
                      ruleForm.value.evaluationUserListString += res.data.data.evaluationUserList[a].userName+';'
                    }
                  }
                });
      }
      if(title=='演练实施查看评价'){
        emergencyDrillEvaluationApi()
                .seeEmergencyDrillEvaluation(id)
                .then((res) => {
                  if (res.data.code == 200) {
                    ruleForm.value = res.data.data;
                    ruleForm.value.planUserListString=''
                    ruleForm.value.chargeUserListString=''
                    ruleForm.value.executeUserListString=''
                    ruleForm.value.evaluationUserListString=''
                    for(var a = 0;a<res.data.data.planUserList.length;a++){
                      ruleForm.value.planUserListString += res.data.data.planUserList[a].userName+';'
                    }
                    for(var a = 0;a<res.data.data.planChargeUserList.length;a++){
                      ruleForm.value.chargeUserListString += res.data.data.planChargeUserList[a].userName+';'
                    }
                    for(var a = 0;a<res.data.data.executeUserList.length;a++){
                      ruleForm.value.executeUserListString += res.data.data.executeUserList[a].userName+';'
                    }
                    //演练负责人(评价)
                    for(var a = 0;a<res.data.data.evaluationUserList.length;a++){
                      ruleForm.value.evaluationUserListString += res.data.data.evaluationUserList[a].userName+';'
                    }
                  }
                });
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    //日期选择器
    const value1 = ref('')
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
    // 可选择树
    const treeSelect = ref()
    const tree = [
      ,
    ]
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [

    ]
    // 必填项提示
    // const rules = reactive<FormRules>({
    //   teamName: [
    //     {
    //       required: true,
    //       message: '队伍名称不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLevel: [
    //     {
    //       required: true,
    //       message: '队伍级别不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLeader: [
    //     {
    //       required: true,
    //       message: '队伍负责人不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   responsibleDepartment: [
    //     {
    //       required: true,
    //       message: '负责人部门不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamPhone: [
    //     {
    //       required: true,
    //       message: '负责人手机不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   telephone: [
    //     {
    //       required: true,
    //       message: '固定电话不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    // })

    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      //演练负责人(评价)
      ruleForm.value.userList = ruleForm.value.evaluationUserList
      // console.log(ruleForm.value.evaluationUserList)
      // ruleForm.value.userList=[]
      // for(var a = 0;a<ruleForm.value.evaluationUserList.length;a++){
      //   // += res.data.data.evaluationUserList[a].userName+';'
      // }
      if (title == '演练实施评价') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            // console.log(ruleForm.value)
            emergencyDrillEvaluationApi()
                    .editEmergencyDrillEvaluation(ruleForm.value)
            // emergencyDrillExecuteApi()
            //         .editEmergencyDrillExecute(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);
          }
        });
        isShowDialog.value = false;
        formEl.resetFields();
        ruleForm.value = {
          drillRecordDate: '', // 演练记录时间
          drillPlanId: '', //演练计划ID
          drillName:'',
          recordUserUid: '', // 记录人ID
          processDesc: '', // 演练过程描述
          userList: [
            {
              userUid: '',
            },
            {
              userUid: '',
            }
          ]
        };
      }
    }
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.drillPlanId=e.id
    };
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog(0);
    };

    const selectUser = (e) =>{
      ruleForm.value.evaluationUserListString=''
      ruleForm.value.evaluationUserList=[]
      for(var a = 0;a<e.length;a++){
        ruleForm.value.evaluationUserList.push(
                {
                  userName: e[a].realName,
                  userUid: e[a].uid,
                }
        )
        ruleForm.value.evaluationUserListString+=e[a].realName+';'
      }
    }
    //el-tree-select回显
    const propse = {
      label: 'depName',
      children: 'children',
    };
    const newTreeList = [];
    //得到部门树
    const department = async () => {
      await goalManagementApi()
              .getTreedepartment()
              .then((res) => {
                if (res.data.code == 200) {
                  data.value = res.data.data;
                  getTreeList(res.data.data, newTreeList);
                } else {
                  ElMessage.error(res.data.msg);
                }
              });
    };
    // 递归树状数据且修改字段名
    const getTreeList = (treeList, newTreeList) => {
      treeList.map((c) => {
        let tempData = {
          depName: c.depName,
          value: c.depId,
          children: [],
        };
        if (c.children && c.children.length > 0) {
          tempData.children = [];
          getTreeList(c.children, tempData.children);
        }
        newTreeList.push(tempData);
      });
    };
    onMounted(() => {
      department();
    });
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      onUser,
      ruleFormRef,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      propse,
      department,
      newTreeList,
      selectUser,
      submitForm
    };
  },
});
</script>
<style scoped lang="scss">
.el-form .el-form-item{
  margin-bottom: 18px !important;
  display: flex;
  align-items: flex-start;
}
::v-deep .el-form-item--default .el-form-item__label{
  text-align: right;
  height: 100%;
}
.textarea{
  height: 90px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 90px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
  position: relative;
}
.el-divider__text {
  position: absolute;
  background-color: #fff;
  padding: 0 20px;
  color: #303133;
  left: 50%;
  font-weight: 500;
  font-size: 14px;
}
</style>

 src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/flowChart.vue

对比新文件
@@ -0,0 +1,325 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="应急演练计划--修改审批进度"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <img class="process-status-img" src="src/assets/icon.png">
      <el-tabs type="border-card">
        <el-tab-pane label="流转记录">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流转记录</span>
              </div>
            </template>
            <div>
              <el-steps :active="2">
                <el-step title="开始" description="胡海涛,2022-07-09 20:41:50" />
                <el-step title="一级审批" description="管理员,2022-07-09 20:41:50" />
              </el-steps>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="执行环节" width="120" />
              <el-table-column prop="name" label="执行人" width="120" />
              <el-table-column prop="address" label="开始时间" width="100" />
              <el-table-column prop="address" label="结束时间" width="100" />
              <el-table-column prop="address" label="办理状态" width="100" />
              <el-table-column prop="address" label="审批意见" width="100" />
              <el-table-column prop="address" label="任务历时" width="100" />
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程信息">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流程信息</span>
              </div>
            </template>
            <div>
              <el-timeline>
                <el-timeline-item timestamp="2018/4/12" placement="top" color="rgb(63, 158, 255)">
                  <el-card>
                    <h4 style="margin: 10px 0;padding-bottom: 10px;">一级审批</h4>
                    <el-row>
                      <el-col class="tip" :span="22" :offset="1">
                        <div class="item">
                          <span class="label">审批人：</span>
                          <span class="value">管理员</span>
                        </div>
                        <div class="item">
                          <span class="label">办理状态：</span>
                          <span class="value">
<!--                             <el-tag-->
<!--                                 v-for="item in items"-->
<!--                                 :key="item.label"-->
<!--                                 :type="item.type"-->
<!--                                 class="mx-1"-->
<!--                                 effect="dark"-->
<!--                             >-->
<!--                               {{ item.label }}-->
<!--                             </el-tag>-->
                             <p class="text">等待审核</p>
                          </span>
                        </div>
                        <div class="item">
                          <span class="label">审批意见：</span>
                          <span class="value">等待审核</span>
                        </div>
                        <div class="item">
                          <span class="label">开始时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">结束时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">用时：</span>
                          <span class="value">0秒</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top" color="rgb(63, 158, 255)">
                  <el-card>
                    <h4>开始</h4>
                    <el-row>
                      <el-col class="tip" :span="22" :offset="1">
                        <div class="item">
                          <span class="label">审批人：</span>
                          <span class="value">胡海涛</span>
                        </div>
                        <div class="item">
                          <span class="label">办理状态：</span>
                          <span class="value">
                            <p class="text">开始</p>
                          </span>
                        </div>
                        <div class="item">
                          <span class="label">审批意见：</span>
                          <span class="value">等待审核</span>
                        </div>
                        <div class="item">
                          <span class="label">开始时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">结束时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">用时：</span>
                          <span class="value">0秒</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程图">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流程图</span>
              </div>
            </template>
            <div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <RegionsDialog ref="Shows"/>
    <UserCheckbox ref="userRef"/>
  </div>
</template>

<script lang="ts">
import {

  ref,
  defineComponent
} from 'vue';

import type {
  TagProps,
} from 'element-plus'

import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"

export default defineComponent({
  name: 'openAdd',
  components: {
    RegionsDialog,
    UserCheckbox,
  },
  setup() {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
    ]

    type Item = { type: TagProps['type']; label: string }

    const items = ref<Array<Item>>([
      { type: '', label: '等待审核' },
    ])
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      Search,
      tableData,
      items,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.process-status-img{
  width: 128px;
  height: auto;
  position: absolute;
  right: 10px;
  top: 60px;
  z-index: 999;
}
//弹窗底部边框线
::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;
}
//tabs字体颜色
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: #a9d86e!important;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
//.box-card {
//  width: 480px;
//}
//步骤条字体大小
::v-deep  .el-step__icon-inner{
  font-size: 14px!important;
}
//步骤条颜色
::v-deep .el-step__line{
  background-color: #409eff;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}

.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
.item{
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}
.item .label {
  display: inline-block;
  height: 100%;
  width: 70px;
  font-size: 14px;
  color: #5e6d82;
  text-align: end;
  vertical-align: top;
}
.item .value {
  padding-left: 10px;
  font-size: 14px;
  max-width: calc(100% - 90px);
  color: #5e6d82;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text{
  background-color: #409eff;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  display: inline-block;
}
</style>

 src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue

对比新文件
@@ -0,0 +1,775 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="整改标题" prop="emergencyPlanName">
              <el-input v-model="ruleForm.emergencyPlanName" placeholder="请填写队伍名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="整改单编号" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="整改来源" prop="teamLeader">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <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-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="整改对象名称" prop="teamLeader">
              <el-input v-model="ruleForm.teamName" placeholder="请填写整改对象名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="不合格因素" prop="teamLevel">
              <el-input v-model="ruleForm.name" class="textarea" type="textarea"></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="teamLevel">
              <el-input v-model="ruleForm.name" class="textarea" type="textarea"></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="teamLeader">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="一般">一般</el-option>
                <el-option label="重大">重大</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="teamLeader">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="死亡">死亡</el-option>
                <el-option label="重伤">重伤</el-option>
                <el-option label="轻伤">轻伤</el-option>
                <el-option label="火灾">火灾</el-option>
                <el-option label="交通事故">交通事故</el-option>
                <el-option label="财产损失">财产损失</el-option>
                <el-option label="其它">其它</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="teamLeader">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="化学品管理" value="admin"></el-option>
                <el-option label="管理制度缺陷" value="common"></el-option>
                <el-option label="设计缺陷" value="admin"></el-option>
                <el-option label="其它" value="common"></el-option>
                <el-option label="现场管理" value="admin"></el-option>
                <el-option label="消防安全" value="common"></el-option>
                <el-option label="消防安全" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="区域名称" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  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="24" :md="24" :lg="24" :xl="24" class="mb20">-->
<!--            <el-form-item label="隐患照片" prop="telephone">-->
<!--              <el-upload-->
<!--                  class="avatar-uploader"-->
<!--                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
<!--                  :show-file-list="false"-->
<!--                  :on-success="handleAvatarSuccess"-->
<!--                  :before-upload="beforeAvatarUpload"-->
<!--              >-->
<!--                <img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
<!--                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
<!--              </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="telephone" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  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="telephone">
              <el-date-picker
                  v-model="value1"
                  class="w100"
                  type="datetime"
                  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="telephone" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  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="telephone">
              <el-date-picker
                  v-model="value1"
                  class="w100"
                  type="datetime"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="填报人部门"  placeholder="请选择">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="现场整改" prop="teamPhone">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="是" value="admin"></el-option>
                <el-option label="否" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="责任部门"  placeholder="请选择">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="组织整改" name="first">
                <el-row style="margin: 0">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;">
                    <el-form-item label="整改意见" prop="teamLevel">
                      <el-input v-model="ruleForm.name" class="textarea" type="textarea" placeholder="请填写整改意见"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;">
                    <el-form-item label="整改期限" prop="telephone">
                      <el-date-picker
                          v-model="value1"
                          class="w100"
                          type="datetime"
                          placeholder="选择日期时间"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;">
                    <el-form-item label="填报人" prop="telephone" >
                      <el-input
                          v-model="ruleForm.teamLeader"
                          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" style="padding-left: 17.5px;padding-right: 17.5px;">
                    <el-form-item label="填报日期" prop="telephone">
                      <el-date-picker
                          v-model="value1"
                          class="w100"
                          type="datetime"
                          placeholder="选择日期时间"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </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" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessage
}
from  'element-plus'
import type {
  TabsPaneContext,
  FormInstance,
  UploadProps,
} from 'element-plus'
import {
  Search,
  Plus,
  FullScreen
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from '/@/components/checkTemplate/index.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'
import {releaseDrillPlanApi} from "/@/api/contingencyManagement/emergencyDrillPlan";
import {emergencyDrillEvaluationApi} from "/@/api/contingencyManagement/emergencyDrillEvaluation";

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      id: '',
      drillPlanId: '',
      suitable: '',
      sufficient: '',
      arrival: '',
      supplies: '',
      protection: '',
      whole: '',
      division: '',
      effect: '',
      report: '',
      safety: '',
      rescue: '',
      evacuate: '',
      needModify: '',
      questionAndImprove: '',
      modifyContent: '',
      fileList: [
        {
          fileName: 'name',
          fileUrl: 'url',
        }
      ],
      userList: [
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    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 == '修改演练实施评价') {
      //   releaseDrillPlanApi()
      //       .seeReleaseDrillPlan(id)
      //       .then((res) => {
      //         if (res.data.code == 200) {
      //           ruleForm.value = res.data.data;
      //         }
      //       });
      // }
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    //日期选择器
    const value1 = ref('')
    // 可选择树
    const treeSelect = ref()
    const tree = [
      {
        value: '1',
        label: 'Level one 1',
        children: [
          {
            value: '11',
            label: 'Level two 1-1',
            children: [
              {
                value: '111',
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '21',
            label: 'Level two 2-1',
            children: [
              {
                value: '211',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '22',
            label: 'Level two 2-2',
            children: [
              {
                value: '221',
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
      {
        value: '3',
        label: 'Level one 3',
        children: [
          {
            value: '31',
            label: 'Level two 3-1',
            children: [
              {
                value: '311',
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            value: '32',
            label: 'Level two 3-2',
            children: [
              {
                value: '321',
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
    ]
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '11',
            label: '经营班子',
            children: [],
          },
        ],
      },
      {
        value: '2',
        label: '生产运行部',
        children: [
          {
            value: '21',
            label: '灌装一班',
            children: []
          },
          {
            value: '22',
            label: '工艺四班',
            children: [],
          },
        ],
      },
      {
        value: '3',
        label: '设备部',
        children: [
          {
            value: '31',
            label: '仪表班',
            children: [],
          },
          {
            value: '32',
            label: '机修班',
            children: [],
          },
        ],
      },
    ]
    // 必填项提示
    // const rules = reactive<FormRules>({
    //   teamName: [
    //     {
    //       required: true,
    //       message: '队伍名称不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLevel: [
    //     {
    //       required: true,
    //       message: '队伍级别不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLeader: [
    //     {
    //       required: true,
    //       message: '队伍负责人不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   responsibleDepartment: [
    //     {
    //       required: true,
    //       message: '负责人部门不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamPhone: [
    //     {
    //       required: true,
    //       message: '负责人手机不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   telephone: [
    //     {
    //       required: true,
    //       message: '固定电话不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    // })
    // 应急队伍弹窗
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '查看演练实施评价') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyDrillEvaluationApi()
                .addEmergencyDrillEvaluation(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;
            emergencyDrillEvaluationApi()
                .editEmergencyDrillEvaluation(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 = {
          id: '',
          drillPlanId: '',
          suitable: '',
          sufficient: '',
          arrival: '',
          supplies: '',
          protection: '',
          whole: '',
          division: '',
          effect: '',
          report: '',
          safety: '',
          rescue: '',
          evacuate: '',
          needModify: '',
          questionAndImprove: '',
          modifyContent: '',
          fileList: [
            {
              fileName: 'name',
              fileUrl: 'url',
            }
          ],
          userList: [
            {
              userUid: ''
            },
            {
              userUid: ''
            }
          ]
        };
      }
    }
    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.openDialog();
    };
    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
    // 上传图片
    const imageUrl = ref('')

    const handleAvatarSuccess: UploadProps['onSuccess'] = (
        response,
        uploadFile
    ) => {
      imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    }
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      activeName,
      handleClick,
      handleAvatarSuccess,
      beforeAvatarUpload,
      Plus,
      toggleFullscreen,
      FullScreen,
      full,
      submitForm,
      emit,
      titles,
      disabled,
      resetForm,
    };
  },
});
</script>
<style scoped lang="scss">
.el-form .el-form-item{
  margin-bottom: 18px !important;
}
::v-deep .el-form-item--default .el-form-item__label{
  text-align: right;
  height: 100%;
}
.textarea{
  height: 50px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 50px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
  position: relative;
}
.el-divider__text {
  position: absolute;
  background-color: #fff;
  padding: 0 20px;
  color: #303133;
  left: 50%;
  font-weight: 500;
  font-size: 14px;
}
////上传图片
//.avatar-uploader .avatar {
//  width: 178px;
//  height: 178px;
//  display: block;
//}

</style>

<!--<style scoped>-->
<!--.avatar-uploader .avatar {-->
<!--  width: 178px;-->
<!--  height: 178px;-->
<!--  display: block;-->
<!--}-->
<!--</style>-->
<!--<style>-->
<!--.avatar-uploader .el-upload {-->
<!--  border: 1px dashed var(&#45;&#45;el-border-color);-->
<!--  border-radius: 6px;-->
<!--  cursor: pointer;-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--  transition: var(&#45;&#45;el-transition-duration-fast);-->
<!--}-->

<!--.avatar-uploader .el-upload:hover {-->
<!--  border-color: var(&#45;&#45;el-color-primary);-->
<!--}-->

<!--.el-icon.avatar-uploader-icon {-->
<!--  font-size: 28px;-->
<!--  color: #8c939d;-->
<!--  width: 178px;-->
<!--  height: 178px;-->
<!--  text-align: center;-->
<!--}-->
<!--</style>-->

 src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue

对比新文件
@@ -0,0 +1,502 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="待评价" name="first">
          <div class="button_Line mb15">
            <div class="button_Left">
              <!--<el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">-->
                <!--<el-icon>-->
                  <!--<Delete />-->
                <!--</el-icon>删除-->
              <!--</el-button>-->
            </div>
<!--            <div class="button_Right">-->
<!--              <el-button @click="upButton">-->
<!--                <el-icon>-->
<!--                  <Upload />-->
<!--                </el-icon>-->
<!--              </el-button>-->
<!--              <el-button>-->
<!--                <el-icon>-->
<!--                  <Download />-->
<!--                </el-icon>-->
<!--              </el-button>-->
<!--              <el-button>-->
<!--                <el-icon>-->
<!--                  <Refresh />-->
<!--                </el-icon>-->
<!--              </el-button>-->
<!--            </div>-->
          </div>
          <el-table
              :data="tableData"
              style="width: 100%"
              ref="multipleTableRef"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                type="selection"
                width="55"
            />
            <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable>
              <template #default="scope">
                <div v-if="scope.row.drillWay=='0'">综合</div>
                <div v-if="scope.row.drillWay=='1'">桌面</div>
                <div v-if="scope.row.drillWay=='2'">专项</div>
              </template>
            </el-table-column>
            <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable>
              <template #default="scope">
                <div v-if="scope.row.drillLevel=='1'">公司级</div>
                <div v-if="scope.row.drillLevel=='2'">分厂级</div>
                <div v-if="scope.row.drillLevel=='3'">车间级</div>
              </template>
            </el-table-column>
            <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="drillRecordDate" label="演练记录日期" show-overflow-tooltip sortable></el-table-column>
<!--            <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>-->
            <el-table-column label="操作" width="260" align="center" fixed="right">
              <template #default="scope">
                <!--<el-button size="small" text disabled>-->
                  <!--<el-icon style="margin-right: 5px;">-->
                    <!--<EditPen />-->
                  <!--</el-icon>评价-->
                <!--</el-button>-->
<!--                <el-button size="small" text type="primary" @click="onFlowChart(scope.row.id)">-->
<!--                  审批进度-->
<!--                </el-button>-->
                <!--<el-button size="small" text type="primary" @click="onApprovalProgress('详情',scope.row.id)">-->
                  <!--<el-icon style="margin-right: 5px;">-->
                    <!--<EditPen />-->
                  <!--</el-icon>查看评价-->
                <!--</el-button>-->

                <el-button size="small" text type="primary" @click="onApprovalProgress('评价',scope.row.id)">
                  <el-icon style="margin-right: 5px;">
                    <EditPen />
                  </el-icon>评价
                </el-button>

                <!--<el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">-->
                  <!--<el-icon style="margin-right: 5px;">-->
                    <!--<EditPen />-->
                  <!--</el-icon>整改-->
                <!--</el-button>-->
                <!--<el-button size="small" text disabled @click="onOpenEdit(scope.row)">-->
                  <!--查看整改-->
                <!--</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
                v-if="tableData.length == 0 ? false : true"
                v-model:currentPage="pageIndex"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :pager-count="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="已评价" name="second">
          <div class="button_Line mb15">
            <div class="button_Left">
              <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
                <el-icon>
                  <Delete />
                </el-icon>删除
              </el-button>
            </div>
            <!--            <div class="button_Right">-->
            <!--              <el-button @click="upButton">-->
            <!--                <el-icon>-->
            <!--                  <Upload />-->
            <!--                </el-icon>-->
            <!--              </el-button>-->
            <!--              <el-button>-->
            <!--                <el-icon>-->
            <!--                  <Download />-->
            <!--                </el-icon>-->
            <!--              </el-button>-->
            <!--              <el-button>-->
            <!--                <el-icon>-->
            <!--                  <Refresh />-->
            <!--                </el-icon>-->
            <!--              </el-button>-->
            <!--            </div>-->
          </div>
          <el-table
              :data="tableData"
              style="width: 100%"
              ref="multipleTableRef"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                    type="selection"
                    width="55"
            />
            <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable>
              <template #default="scope">
                <div v-if="scope.row.drillWay=='0'">综合</div>
                <div v-if="scope.row.drillWay=='1'">桌面</div>
                <div v-if="scope.row.drillWay=='2'">专项</div>
              </template>
            </el-table-column>
            <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable>
              <template #default="scope">
                <div v-if="scope.row.drillLevel=='1'">公司级</div>
                <div v-if="scope.row.drillLevel=='2'">分厂级</div>
                <div v-if="scope.row.drillLevel=='3'">车间级</div>
              </template>
            </el-table-column>
            <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="drillRecordDate" label="演练记录日期" show-overflow-tooltip sortable></el-table-column>
            <!--            <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>-->
            <el-table-column label="操作" width="260" align="center" fixed="right">
              <template #default="scope">
                <!--<el-button size="small" text disabled>-->
                  <!--<el-icon style="margin-right: 5px;">-->
                    <!--<EditPen />-->
                  <!--</el-icon>评价-->
                <!--</el-button>-->
                <!--                <el-button size="small" text type="primary" @click="onFlowChart(scope.row.id)">-->
                <!--                  审批进度-->
                <!--                </el-button>-->
                <el-button size="small" text type="primary" @click="onApprovalProgress('查看评价',scope.row.id)">
                  <el-icon style="margin-right: 5px;">
                    <EditPen />
                  </el-icon>查看评价
                </el-button>
                <!--<el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">-->
                  <!--<el-icon style="margin-right: 5px;">-->
                    <!--<EditPen />-->
                  <!--</el-icon>整改-->
                <!--</el-button>-->
                <!--<el-button size="small" text disabled @click="onOpenEdit(scope.row)">-->
                  <!--查看整改-->
                <!--</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
                v-if="tableData.length == 0 ? false : true"
                v-model:currentPage="pageIndex"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :pager-count="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <ApprovalProgress ref="approvalRef" @myAdd="onMyAdd" />
<!--    <FlowChart ref="flowRef" />-->
    <RectificationDialog ref="rectificationRef" @myAdd="onMyAdds" />
<!--    <upData ref="upShow"></upData>-->
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessage,
  ElMessageBox,
  TabsPaneContext,
} from 'element-plus';
import {
  Plus,
  // Upload,
  // Download,
  // Refresh,
  Delete,
  EditPen,
} from '@element-plus/icons-vue'
// import FlowChart from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/flowChart.vue'
import ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue';
// import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue';
import {emergencyDrillEvaluationApi} from '/@/api/contingencyManagement/emergencyDrillEvaluation'
import {emergencyDrillExecuteApi} from "/@/api/contingencyManagement/emergencyDrillExecute";


// 定义接口来定义对象的类型
// interface TableDataRow {
// }
export default defineComponent({
  name: 'systemUser',
  components: {
    EditPen,
    Plus,
    // Upload,
    // Download,
    // Refresh,
    // UpData,
    Delete,
    ApprovalProgress,
    RectificationDialog,
    // FlowChart
  },
  setup() {
    const activeName = ref('first')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
      if(tab.props.name=='first'){
        listQuery.searchParams.status=false
        listApi()
      }else if(tab.props.name=='second'){
        listQuery.searchParams.status=true
        listApi()
      }
    }
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        status:false
      },
    });
    // 定义表格数据
    const tableData = ref([]);

    // 列表数据请求
    const listApi = async () => {
      // let res = await emergencyDrillEvaluationApi().getEmergencyDrillEvaluationList(listQuery);
      let res = await emergencyDrillExecuteApi().getEmergencyDrillExecuteList(listQuery);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error',
        });
      }
    };

    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }

    // 审批进度弹窗
    // const flowRef = ref();
    // const onFlowChart = (row: TableDataRow) => {
    //   flowRef.value.openDialog(row);
    // };
    // 打开修改弹窗
    const rectificationRef = ref();
    const onEdit = (val: string, row: object) => {
      if (val == '修改') {
        rectificationRef.value.openDialog('修改演练实施评价',row,false);
      } else {
        // rectificationRef.value.openDialog('修改演练实施评价',row,false);
      }
    };
    const onMyAdds = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 审批进度弹窗
    const approvalRef = ref();
    const onApprovalProgress = (val: string, row: object) => {
      if (val == '详情') {
        approvalRef.value.openDialog('查看演练实施评价', row, true);
      }
      if (val == '评价') {
        approvalRef.value.openDialog('演练实施评价', row, false);
      }
      if (val == '查看评价') {
        approvalRef.value.openDialog('演练实施查看评价', row, true);
      }
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 整改弹窗
    // const rectificationRef = ref();
    // const onEdit = () => {
    //   rectificationRef.value.openDialog();
    // };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencyDrillEvaluationApi()
                .deleteEmergencyDrillEvaluation(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      listApi();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      listApi();
    };
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr;
      // console.log(deletAll.value);
      if (val.length == 1) {
        danger.value = false;
      }  else if (val.length == 0) {
        danger.value = true;
      } else {
        danger.value = false;
      }
    };
    onMounted(() => {
      listApi();
    });
    return {
      activeName,
      handleClick,
      // upButton,
      // upShow,
      tableData,
      // onOpenEdit,  //编辑
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      onApprovalProgress,
      approvalRef,
      onEdit,
      rectificationRef,
      // onFlowChart,
      // flowRef,
      onDeleteAll,
      danger,
      total,
      handleSelectionChange,
      onMyAdd,
      onMyAdds,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue

对比新文件
@@ -0,0 +1,628 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
        @close="resetForm(ruleFormRef)"
    >
      <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="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练名称" prop="drillName">
              <el-input
                  v-model="ruleForm.drillName"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="regionsDialog"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练地点" prop="drillAddress">
              <el-input :disabled="true" v-model="drillRuleForm.drillAddress" placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="主办部门"  placeholder="请选择" prop="departmentId">
              <el-tree-select
                      :disabled="true"
                      v-model="drillRuleForm.departmentId"
                      :data="deptData"
                      check-strictly
                      class="w100"
                      :props="propse"
                      clearable
                      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="drillWay">
              <el-select :disabled="true" v-model="drillRuleForm.drillWay" class="w100" placeholder="请选择">

                <el-option label="综合" value="0"></el-option>
                <el-option label="桌面" value="1"></el-option>
                <el-option label="专项" value="2"></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="planName" >
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.planName"
                      placeholder="请选择"
                      class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练级别" prop="drillLevel">
              <el-select :disabled="true" v-model="drillRuleForm.drillLevel" class="w100" placeholder="请选择">
                <el-option label="公司级" value="1"></el-option>
                <el-option label="分厂级" value="2"></el-option>
                <el-option label="车间级" value="3"></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="makingPlanDate">
              <el-date-picker :disabled="true" v-model="drillRuleForm.makingPlanDate"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划演练日期" prop="drillPlanDate">
              <el-date-picker :disabled="true" v-model="drillRuleForm.drillPlanDate"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="gmtModitify">
              <el-date-picker :disabled="true" v-model="drillRuleForm.gmtModitify"
                              value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="makingUserName">
              <el-input :disabled="true" v-model="drillRuleForm.makingUserName" 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="makingDepartmentId">
              <el-tree-select
                      :disabled="true"
                      v-model="drillRuleForm.makingDepartmentId"
                      check-strictly
                      :data="deptData"
                      class="w100"
                      :props="propse"
                      clearable
                      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="userListString" >
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.userListString"
                      placeholder="请选择"
                      class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="openUser(0)"/>
                </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="演练目的" prop="purpose">
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.purpose"
                      placeholder="请填写演练目的"
                      class="input-with-select textarea"
                      type="textarea"
              >
              </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="chargeUserListString" >
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.chargeUserListString"
                      placeholder="请选择"
                      class="input-with-select"
              >
                <template #append>
                  <el-button :disabled="true" :icon="Search" @click="openUser(1)"/>
                </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="insuranceMeasures">
              <el-input :disabled="true" v-model="drillRuleForm.insuranceMeasures" 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="drillExpense">
              <el-input :disabled="true" v-model="drillRuleForm.drillExpense" 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="remark">
              <el-input
                      :disabled="true"
                      v-model="drillRuleForm.remark"
                      placeholder="请填写备注信息"
                      class="input-with-select textarea"
                      type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>




        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="实际到场人员" prop="autualUserListString" >
              <el-input
                  v-model="ruleForm.autualUserListString"
                  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="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练过程描述" prop="processDesc">
              <el-input
                  v-model="ruleForm.processDesc"
                  placeholder="请填写演练目的"
                  class="textarea"
                  type="textarea"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练记录人" prop="recordUserName" >
              <el-input
                  v-model="ruleForm.recordUserName"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练记录时间" prop="drillRecordDate">
              <el-date-picker
                  class="w100"
                  v-model="ruleForm.drillRecordDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </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" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <!--记录人-->
    <DailogSearchUser ref="Shows" @SearchUser="onUser"/>
    <!--到场人员-->
    <DailogSearchUser ref="userRef" @SearchUser="selectDCuser"/>
    <RegionsDialog ref="openRef" @SearchUser="onUsers"/>
  </div>
</template>

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

import type {
  FormInstance,
  // FormRules,
} from 'element-plus'
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
import RegionsDialog from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue'
import {emergencyDrillExecuteApi} from "/@/api/contingencyManagement/emergencyDrillExecute";
import {releaseDrillPlanApi} from "/@/api/contingencyManagement/emergencyDrillPlan";
import {goalManagementApi} from "/@/api/goalManagement";

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      drillRecordDate: '', // 演练记录时间
      drillPlanId: '', //演练计划ID
      drillName:'',
      recordUserUid: '', // 记录人ID
      recordUserName:'',
      processDesc: '', // 演练过程描述

      autualUserListString:'',
      userList: [
        {
          userUid: '',
        },
        {
          userUid: '',
        }
      ]
    });
    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 == '修改应急演练实施') {
        emergencyDrillExecuteApi()
            .seeEmergencyDrillExecute(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
                ruleForm.value.autualUserListString=''
                for(var a = 0;a<res.data.data.userList.length;a++){
                  ruleForm.value.autualUserListString += res.data.data.userList[a].userName+';'
                }

                releaseDrillPlanApi()
                  .seeReleaseDrillPlan(res.data.data.drillPlanId)
                  .then((res1) => {
                    if (res1.data.code == 200) {
                      drillRuleForm.value = res1.data.data;

                      drillRuleForm.value.userListString=''
                      drillRuleForm.value.chargeUserListString=''
                      for(var a = 0;a<res1.data.data.userList.length;a++){
                        if(res1.data.data.userList[a].type==1){
                          drillRuleForm.value.userListString += res1.data.data.userList[a].userName+';'
                        }
                        // if(res.data.data.userList[a].type==2){
                        //   ruleForm.value.chargeUserListString += res.data.data.userList[a].userName+';'
                        // }
                      }
                      // alert(res.data.data.chargeUserList.length)
                      for(var a = 0;a<res1.data.data.chargeUserList.length;a++){
                        drillRuleForm.value.chargeUserListString += res1.data.data.chargeUserList[a].userName+';'
                      }
                    }
                  })
              }
            });
      }
    };
    const data =  [];
    const deptData = []
    //部门树
    // const department = () => {
    //   goalManagementApi()
    //           .getTreedepartment()
    //           .then((res) => {
    //             if (res.data.code == 200) {
    //               deptData.value = res.data.data;
    //               console.log('-------',deptData.value)
    //             } else {
    //               ElMessage.error(res.data.msg);
    //             }
    //           });
    // };
    //
    // const propse = {
    //   label: 'depName',
    //   children: 'children',
    //   value: 'depId',
    // };
    //el-tree-select回显
    const propse = {
      label: 'depName',
      children: 'children',
    };
    //得到部门树
    const department = async () => {
      await goalManagementApi()
              .getTreedepartment()
              .then((res) => {
                if (res.data.code == 200) {
                  data.value = res.data.data;
                  getTreeList(res.data.data, deptData);
                  console.log('deptData',deptData)
                } else {
                  ElMessage.error(res.data.msg);
                }
              });
    };
    // 递归树状数据且修改字段名
    const getTreeList = (treeList, deptData) => {
      treeList.map((c) => {
        let tempData = {
          depName: c.depName,
          value: c.depId,
          children: [],
        };
        if (c.children && c.children.length > 0) {
          tempData.children = [];
          getTreeList(c.children, tempData.children);
        }
        deptData.push(tempData);
      });
    };
    onMounted(() => {
      department();
    });
    //日期选择器
    const drillRecordDate = ref('')
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急演练实施') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyDrillExecuteApi()
                .addEmergencyDrillExecute(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;
            emergencyDrillExecuteApi()
                .editEmergencyDrillExecute(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 = {
          drillRecordDate: '', // 演练记录时间
          drillPlanId: '', //演练计划ID
          drillName:'',
          recordUserUid: '', // 记录人ID
          processDesc: '', // 演练过程描述
          userList: [
            {
              userUid: '',
            },
            {
              userUid: '',
            }
          ]
        };
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      drillRuleForm.value={}
      formEl.resetFields();
    };

    // 演练名称弹窗
    const openRef=ref()
    const regionsDialog = () => {
      openRef.value.openDailog()
    }
    //定义表单
    const drillRuleForm = ref ({})
    const onUsers = (e:any) => {
      console.log(e)
      releaseDrillPlanApi()
              .seeReleaseDrillPlan(e.id)
              .then((res) => {
                if (res.data.code == 200) {
                  drillRuleForm.value = res.data.data;

                  drillRuleForm.value.userListString=''
                  drillRuleForm.value.chargeUserListString=''
                    for(var a = 0;a<res.data.data.userList.length;a++){
                      if(res.data.data.userList[a].type==1){
                        drillRuleForm.value.userListString += res.data.data.userList[a].userName+';'
                      }
                      // if(res.data.data.userList[a].type==2){
                      //   ruleForm.value.chargeUserListString += res.data.data.userList[a].userName+';'
                      // }
                    }
                    // alert(res.data.data.chargeUserList.length)
                    for(var a = 0;a<res.data.data.chargeUserList.length;a++){
                      drillRuleForm.value.chargeUserListString += res.data.data.chargeUserList[a].userName+';'
                    }
                }
              })
      ruleForm.value.drillPlanId=e.id
      ruleForm.value.drillName=e.drillName
    };
    // 实际到场人员弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog(0);
    };
    const selectDCuser = (e) => {
      ruleForm.value.autualUserListString=''
      ruleForm.value.userList=[]
      for(var a = 0;a<e.length;a++){
        ruleForm.value.userList.push(
                {
                  userName: e[a].realName,
                  userUid: e[a].uid,
                }
        )
        ruleForm.value.autualUserListString+=e[a].realName+';'
      }
    }
    // 演练记录人弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.recordUserUid=e.uid
      ruleForm.value.recordUserName=e.realName
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      isShowDialog,
      Search,
      ruleForm,
      drillRecordDate,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      onUsers,
      onUser,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      selectDCuser,
      drillRuleForm,
      deptData,
      propse,
      data,
      department
    };
  },
});
</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%;
}
.textarea{
  height: 90px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 90px!important;
}
</style>

 src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue

对比新文件
@@ -0,0 +1,221 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择演练计划" width="900px" draggable :fullscreen="full">
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" status-icon>
              <el-form-item>
                <el-input size="default" v-model="listQuery.searchParams.drillName" placeholder="演练名称" style="max-width: 215px;margin-right: 12px;" />
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" @click="onSubmit">查询</el-button>
                <el-button size="default" @click="submitReset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            style="width: 100%;
             margin-top: 20px"
            @cell-click="radio"
        >
          <el-table-column width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row" size="large">{{ null }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="drillName" label="演练名称" />
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="onHandleSizeChange"
              @current-change="onHandleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div v-if="dynamicTags[0] == '' ? false : true">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag.drillName }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import { emergencyPlanLogApi } from '/@/api/contingencyManagement/emergencyPlanLog';
import { emergencyPlanApi } from '/@/api/contingencyManagement/emergencyPlan';
import {releaseDrillPlanApi} from "/@/api/contingencyManagement/emergencyDrillPlan";
export default defineComponent({
  setup(props, { emit }) {
    const dialogVisible = ref<boolean>(false);
    const openDailog = () => {
      dialogVisible.value = true;
      onSubmit()
    };
    // 搜索条件
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        drillName: ''
      },
    });
    // 列表请求数据
    const onSubmit = async () => {
      let res = await releaseDrillPlanApi().getReleaseDrillPlanList(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 tableData = ref([]);
    // 重置
    const submitReset = () => {
      listQuery.searchParams.drillName = '';
      onSubmit();
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    // 分页未改变
    const onHandleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };
    // 右方点击添加后显示标签
    const dynamicTags = ref(['']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value = '';
    };
    const radio1 = ref('');
    const radio = (event: any) => {
      dynamicTags.value[0] = event;
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };

    const submitForm = () => {
      let obj = JSON.parse(JSON.stringify(dynamicTags.value));
      emit('SearchUser', obj[0]);
      dialogVisible.value = false;
    };
    onMounted(() => {
      onSubmit();
    });
    return {
      dialogVisible,
      openDailog,
      tableData,
      pageSize,
      pageIndex,
      onHandleSizeChange,
      onHandleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      radio1,
      radio,
      toggleFullscreen,
      FullScreen,
      full,
      submitReset,
      onMounted,
      listQuery,
      submitForm,
      onSubmit,
      total,
    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages {
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue

对比新文件
@@ -0,0 +1,443 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="用户选择"
        v-model="isShowDialog"
        width="1000px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
        <el-aside width="200px">
          <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
          <el-tree
              ref="treeRef"
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
              </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>
          </el-header>
          <el-main style="position: relative;">
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
            >
              <el-table-column align="center" width="55">
                <template #default="scope">
                  <el-radio-group v-model="radio1" @change="radio">
                    <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
              <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
              <el-table-column  label="状态"
                                width="80"
                                prop="tag"
                                :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                                :filter-method="filterTag"
                                filter-placement="bottom-end">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.tag === 'Home' ? '' : 'success'"
                      disable-transitions
                  >{{ scope.row.tag }}</el-tag
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div style="width: 200px;">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-container>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

import type {
  ElTree,
  // ElTable,
} from 'element-plus'
import {
  FullScreen
} from '@element-plus/icons-vue'
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
// interface User {
//   date: string
//   name: string
//   address: string
// }
export default defineComponent({
  name: 'userSelections',
  components: {
    // Search,
  },
  setup() {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };


    const filterText = ref('')
    const treeRef = ref<InstanceType<typeof ElTree>>()  //实例化

    const defaultProps = {
      children: 'children',
      label: 'label',
    }

    // 监听搜索关键字改变
    watch(filterText, (val) => {
      treeRef.value!.filter(val)
    })

    // 节点过滤模糊搜索
    const filterNode = (value: string, data: Tree) => {
      if (!value) return true
      return data.label.includes(value)
    }

    // 树形结构内容
    const data: Tree[] = [
      {
        id: 1,
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            id: 4,
            label: '经营班子',
            children: []
          },
        ],
      },
      {
        id: 2,
        label: '生产运行部',
        children: [
          {
            id: 5,
            label: '工艺二班',
          },
          {
            id: 6,
            label: '灌装一班',
          },
        ],
      },
      {
        id: 3,
        label: '设备部',
        children: [
          {
            id: 7,
            label: '仪表班',
          },
          {
            id: 8,
            label: '机修班',
          },
        ],
      },
    ]
    // const item = {
    //   date: '孙刚',
    //   name: '龚赛健',
    //   address: '综合办公室',
    //   tag: '正常',
    // }
    // const tableData = ref(Array.from({ length: 7 }).fill(item))
    const tableData = [
      {
        date: '孙刚',
        name: '孙刚',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '谭柏',
        name: '谭柏',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪威',
        name: '倪威',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪玲婕',
        name: '倪玲婕',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
    ];
    // 定义表单搜索
    const formInline = reactive({
      name: '',
    })
    // 搜索按钮
    const onSubmit = () => {
      console.log('submit!')
    }

    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['胡海涛']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('谭柏')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      defaultProps,
      filterNode,
      data,
      tableData,
      formInline,
      onSubmit,
      // multipleTableRef,
      handleClose,
      dynamicTags,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      radio1,
      radio,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
  padding: 0;
}
.layout-container-demo .el-aside {
  padding: 10px;
  border: 1px solid #ebeef5;
  color: var(--el-text-color-primary);
}
::v-deep .el-input--large .el-input__inner {
  height: 32px!important;
  line-height: 32px!important;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-input--large{
  //width: 178px;
  height: 32px;
}
.el-tree{
  overflow: auto;
}
::-webkit-scrollbar {
  height: 1px;

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::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;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::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/emergencyDrill/implementationOfEmergencyDrill/index.vue

对比新文件
@@ -0,0 +1,375 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="button_Line mb15">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
        </div>
        <div class="button_Right">
<!--          <el-button @click="upButton">-->
<!--            <el-icon>-->
<!--              <Upload />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button>-->
<!--            <el-icon>-->
<!--              <Download />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button>-->
<!--            <el-icon>-->
<!--              <Refresh />-->
<!--            </el-icon>-->
<!--          </el-button>-->
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref=""
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable>
          <template #default="scope">
            <div v-if="scope.row.drillWay=='0'">综合</div>
            <div v-if="scope.row.drillWay=='1'">桌面</div>
            <div v-if="scope.row.drillWay=='2'">专项</div>
          </template>
        </el-table-column>
        <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable>
          <template #default="scope">
            <div v-if="scope.row.drillLevel=='1'">公司级</div>
            <div v-if="scope.row.drillLevel=='2'">分厂级</div>
            <div v-if="scope.row.drillLevel=='3'">车间级</div>
          </template>
        </el-table-column>
        <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillRecordDate" label="演练记录时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="emergencyPlanName" 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="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </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="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"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
<!--    <upData ref="upShow"></upData>-->
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  // ElTable,
} from 'element-plus';
import { Plus,
  // Edit,
  Delete,
  // Upload,
  // Download,
  View,
  Refresh,
  VideoPause,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import {emergencyDrillExecuteApi} from "/@/api/contingencyManagement/emergencyDrillExecute";

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    EditPen,
    Plus,
    // Edit,
    Delete,
    View,
    // Upload,
    // Download,
    Refresh,
    VideoPause,
    UpData
  },
  setup() {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
      },
    });
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const listApi = async () => {
      let res = await emergencyDrillExecuteApi().getEmergencyDrillExecuteList(listQuery);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error',
        });
      }
    };

    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急演练实施',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 打开修改用户弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急演练实施',row,true);
      } else {
        addRef.value.openDialog('修改应急演练实施',row,false);
      }
    };
    // 删除用户
    const onRowDel = (id: number) => {
      let arr = [];
      arr.push(id)
      ElMessageBox.confirm('确定删除所选项吗?', '提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        emergencyDrillExecuteApi()
            .deleteEmergencyDrillExecute(arr)
            .then((res) => {
              if (res.data.code == 200) {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'success',
                });
                listApi();
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
                listApi();
              }
            });
      })
          .catch(() => {});
    };
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr;
      if (val.length == 1) {
        danger.value = false;
      }  else if (val.length == 0) {
        danger.value = true;
      } else {
        danger.value = false;
      }
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencyDrillExecuteApi()
                .deleteEmergencyDrillExecute(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      listApi();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      listApi();
    };

    onMounted(() => {
      listApi();
    });
    return {
      // upButton,
      // upShow,
      tableData,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      onMyAdd,
      total,
      onDeleteAll,
      handleSelectionChange,
      danger,
      deletAll,
      onEdit,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页开始
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
//分页结束
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/flowChart.vue

对比新文件
@@ -0,0 +1,325 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="应急演练计划--修改审批进度"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <img class="process-status-img" src="src/assets/icon.png">
      <el-tabs type="border-card">
        <el-tab-pane label="流转记录">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流转记录</span>
              </div>
            </template>
            <div>
              <el-steps :active="2">
                <el-step title="开始" description="胡海涛,2022-07-09 20:41:50" />
                <el-step title="一级审批" description="管理员,2022-07-09 20:41:50" />
              </el-steps>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="执行环节" width="120" />
              <el-table-column prop="name" label="执行人" width="120" />
              <el-table-column prop="address" label="开始时间" width="100" />
              <el-table-column prop="address" label="结束时间" width="100" />
              <el-table-column prop="address" label="办理状态" width="100" />
              <el-table-column prop="address" label="审批意见" width="100" />
              <el-table-column prop="address" label="任务历时" width="100" />
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程信息">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流程信息</span>
              </div>
            </template>
            <div>
              <el-timeline>
                <el-timeline-item timestamp="2018/4/12" placement="top" color="rgb(63, 158, 255)">
                  <el-card>
                    <h4 style="margin: 10px 0;padding-bottom: 10px;">一级审批</h4>
                    <el-row>
                      <el-col class="tip" :span="22" :offset="1">
                        <div class="item">
                          <span class="label">审批人：</span>
                          <span class="value">管理员</span>
                        </div>
                        <div class="item">
                          <span class="label">办理状态：</span>
                          <span class="value">
<!--                             <el-tag-->
<!--                                 v-for="item in items"-->
<!--                                 :key="item.label"-->
<!--                                 :type="item.type"-->
<!--                                 class="mx-1"-->
<!--                                 effect="dark"-->
<!--                             >-->
<!--                               {{ item.label }}-->
<!--                             </el-tag>-->
                             <p class="text">等待审核</p>
                          </span>
                        </div>
                        <div class="item">
                          <span class="label">审批意见：</span>
                          <span class="value">等待审核</span>
                        </div>
                        <div class="item">
                          <span class="label">开始时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">结束时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">用时：</span>
                          <span class="value">0秒</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top" color="rgb(63, 158, 255)">
                  <el-card>
                    <h4>开始</h4>
                    <el-row>
                      <el-col class="tip" :span="22" :offset="1">
                        <div class="item">
                          <span class="label">审批人：</span>
                          <span class="value">胡海涛</span>
                        </div>
                        <div class="item">
                          <span class="label">办理状态：</span>
                          <span class="value">
                            <p class="text">开始</p>
                          </span>
                        </div>
                        <div class="item">
                          <span class="label">审批意见：</span>
                          <span class="value">等待审核</span>
                        </div>
                        <div class="item">
                          <span class="label">开始时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">结束时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">用时：</span>
                          <span class="value">0秒</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程图">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流程图</span>
              </div>
            </template>
            <div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <RegionsDialog ref="Shows"/>
    <UserCheckbox ref="userRef"/>
  </div>
</template>

<script lang="ts">
import {

  ref,
  defineComponent
} from 'vue';

import type {
  TagProps,
} from 'element-plus'

import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"

export default defineComponent({
  name: 'openAdd',
  components: {
    RegionsDialog,
    UserCheckbox,
  },
  setup() {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
    ]

    type Item = { type: TagProps['type']; label: string }

    const items = ref<Array<Item>>([
      { type: '', label: '等待审核' },
    ])
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      Search,
      tableData,
      items,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.process-status-img{
  width: 128px;
  height: auto;
  position: absolute;
  right: 10px;
  top: 60px;
  z-index: 999;
}
//弹窗底部边框线
::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;
}
//tabs字体颜色
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: #a9d86e!important;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
//.box-card {
//  width: 480px;
//}
//步骤条字体大小
::v-deep  .el-step__icon-inner{
  font-size: 14px!important;
}
//步骤条颜色
::v-deep .el-step__line{
  background-color: #409eff;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}

.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
.item{
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}
.item .label {
  display: inline-block;
  height: 100%;
  width: 70px;
  font-size: 14px;
  color: #5e6d82;
  text-align: end;
  vertical-align: top;
}
.item .value {
  padding-left: 10px;
  font-size: 14px;
  max-width: calc(100% - 90px);
  color: #5e6d82;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text{
  background-color: #409eff;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  display: inline-block;
}
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue

对比新文件
@@ -0,0 +1,572 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
        @close="resetForm(ruleFormRef)"
    >
      <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="drillName">
              <el-input v-model="ruleForm.drillName" 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="drillAddress">
              <el-input v-model="ruleForm.drillAddress" placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="主办部门"  placeholder="请选择" prop="departmentId">
              <el-tree-select
                  v-model="ruleForm.departmentId"
                  :data="data"
                  check-strictly
                  class="w100"
                  :props="propse"
                  clearable
                  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="drillWay">
              <el-select v-model="ruleForm.drillWay" class="w100" placeholder="请选择">

                <el-option label="综合" value="0"></el-option>
                <el-option label="桌面" value="1"></el-option>
                <el-option label="专项" value="2"></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="planName" >
              <el-input
                  v-model="ruleForm.planName"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练级别" prop="drillLevel">
              <el-select v-model="ruleForm.drillLevel" class="w100" placeholder="请选择">
                <el-option label="公司级" value="1"></el-option>
                <el-option label="分厂级" value="2"></el-option>
                <el-option label="车间级" value="3"></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="makingPlanDate">
              <el-date-picker v-model="ruleForm.makingPlanDate" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划演练日期" prop="drillPlanDate">
              <el-date-picker v-model="ruleForm.drillPlanDate" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="gmtModitify">
              <el-date-picker v-model="ruleForm.gmtModitify" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="makingUserName">
              <el-input v-model="ruleForm.makingUserName" placeholder="请填写计划定制人" disabled></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="makingDepartmentId">
              <el-tree-select
                  v-model="ruleForm.makingDepartmentId"
                  check-strictly
                  :data="data"
                  class="w100"
                  :props="propse"
                  clearable
                  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="userListString" >
              <el-input
                  v-model="ruleForm.userListString"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser(0)"/>
                </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="演练目的" prop="purpose">
              <el-input
                  v-model="ruleForm.purpose"
                  placeholder="请填写演练目的"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </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="chargeUserListString" >
              <el-input
                  v-model="ruleForm.chargeUserListString"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser(1)"/>
                </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="insuranceMeasures">
              <el-input v-model="ruleForm.insuranceMeasures" 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="drillExpense">
              <el-input v-model="ruleForm.drillExpense" 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="remark">
              <el-input
                  v-model="ruleForm.remark"
                  placeholder="请填写备注信息"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
            <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"-->
              <!--&gt;-->
                <!--<el-button type="primary"-->
                <!--&gt;点击上传</el-button>-->
                <!--<template #tip>-->
                  <!--<div class="el-upload__tip">-->
                    <!--添加相关附件-->
                  <!--</div>-->
                <!--</template>-->
              <!--</el-upload>-->
            </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" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <RegionsDialog ref="Shows" @SearchUser="onUser" />
    <DailogSearchUser ref="userRef" @SearchUser="SearchUser" />
    <DailogSearchUser ref="userFZRef" @SearchUser="SearchFZUser" />
  </div>
</template>

<script lang="ts">
import {
  // reactive,
  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 RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"
import {releaseDrillPlanApi} from "/@/api/contingencyManagement/emergencyDrillPlan";
import {goalManagementApi} from "/@/api/goalManagement";
import { Session } from '/@/utils/storage';

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      makingPlanDate: '', // 计划制定日期
      drillPlanDate: '', //计划演练日期
      makingUserUid: '', //计划制定人ID
      makingUserName: '', //计划制定人Name
      makingDepartmentId: '', // 计划制定部门ID
      planId: '', // 应急预案ID
      planName: '', // 应急预案name
      departmentId: '', // 主办部门ID
      drillExpense: '', // 演练经费
      drillLevel: '', //演练级别
      drillAddress: '', //演练地点
      drillName: '', // 演练名称
      drillWay: '', // 演练方式
      insuranceMeasures: '', // 保险措施
      remark: '', // 备注
      purpose: '', // 演练目的
      fileList: [
      ],
      userList: [
      ],
      chargeUserList:[],
      userListString:'',//演练人员字段(回填使用)
      chargeUserListString:'',//演练负责人字段(回填使用)
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      ruleForm.value.makingUserUid = Session.get('uid');
      ruleForm.value.makingUserName = Session.get('realName');
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急演练计划发布' || title == '修改应急演练计划发布') {
        releaseDrillPlanApi()
            .seeReleaseDrillPlan(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
                ruleForm.value.userListString=''
                ruleForm.value.chargeUserListString=''
                for(var a = 0;a<res.data.data.userList.length;a++){
                  if(res.data.data.userList[a].type==1){
                    ruleForm.value.userListString += res.data.data.userList[a].userName+';'
                  }
                  // if(res.data.data.userList[a].type==2){
                  //   ruleForm.value.chargeUserListString += res.data.data.userList[a].userName+';'
                  // }
                }
                // alert(res.data.data.chargeUserList.length)
                for(var a = 0;a<res.data.data.chargeUserList.length;a++){
                  ruleForm.value.chargeUserListString += res.data.data.chargeUserList[a].userName+';'
                }
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
    // 可选择树
    const treeSelect = ref()
    const tree = [
    ]
    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            }
          });
    };
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = ref()
    const propse = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    };
    onMounted(() => {
      department();
    });
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      ruleForm.value.userList = ruleForm.value.userList.concat(ruleForm.value.chargeUserList)
      if (title == '新建应急演练计划发布') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            releaseDrillPlanApi()
                .addReleaseDrillPlan(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;
            releaseDrillPlanApi()
                .editReleaseDrillPlan(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 = {
          makingPlanDate: '', // 计划制定日期
          drillPlanDate: '', //计划演练日期
          makingUserUid: '', //计划制定人ID
          makingDepartmentId: '', // 计划制定部门ID
          planId: '', // 应急预案ID
          planName: '', // 应急预案name
          departmentId: '', // 主办部门ID
          drillExpense: '', // 演练经费
          drillLevel: '', //演练级别
          drillAddress: '', //演练地点
          drillName: '', // 演练名称
          drillWay: '', // 演练方式
          insuranceMeasures: '', // 保险措施
          remark: '', // 备注
          purpose: '', // 演练目的
          fileList: [
          ],
          userList: [
          ],
          chargeUserList:[],
          userListString:'',//演练人员字段(回填使用)
          chargeUserListString:'',//演练负责人字段(回填使用)
        };
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      ruleForm.value = {
        makingPlanDate: '', // 计划制定日期
        drillPlanDate: '', //计划演练日期
        makingUserUid: '', //计划制定人ID
        makingDepartmentId: '', // 计划制定部门ID
        planId: '', // 应急预案ID
        planName: '', // 应急预案name
        departmentId: '', // 主办部门ID
        drillExpense: '', // 演练经费
        drillLevel: '', //演练级别
        drillAddress: '', //演练地点
        drillName: '', // 演练名称
        drillWay: '', // 演练方式
        insuranceMeasures: '', // 保险措施
        remark: '', // 备注
        purpose: '', // 演练目的
        fileList: [
        ],
        userList: [
        ],
        chargeUserList:[],
        userListString:'',//演练人员字段(回填使用)
        chargeUserListString:'',//演练负责人字段(回填使用)
      };
      formEl.resetFields();
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt = () => {
      Shows.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.planId=e.id
      ruleForm.value.planName=e.name
    };
    // 打开用户选择弹窗
    const userRef = ref();
    const userFZRef = ref();
    //打开演练人员和演练负责人弹窗  type 0 演练人员  1 演练负责人
    const openUser = (type:number) => {
      if(type==0){
        userRef.value.openDailog(0);
      }else if(type==1){
        userFZRef.value.openDailog(0);
      }
    };
    const SearchUser = (e:any) => {
      console.log('演练人员',e)
      ruleForm.value.userListString=''
      ruleForm.value.userList=[]
      for(var a = 0;a<e.length;a++){
        ruleForm.value.userList.push(
          {
            type: 1,
            userName: e[a].realName,
            userUid: e[a].uid,
          }
        )
        ruleForm.value.userListString+=e[a].realName+';'
      }

    };
    const SearchFZUser = (e:any) => {
      console.log('演练负责人员',e[0].userName)
      ruleForm.value.chargeUserListString=''
      ruleForm.value.chargeUserList=[]
      // ruleForm.value.chargeUserList = []
      for(var a = 0;a<e.length;a++){
        ruleForm.value.chargeUserList.push(
          {
            type: 2,
            userName: e[a].realName,
            userUid: e[a].uid,
          }
        )
        ruleForm.value.chargeUserListString+=e[a].realName+';'
      }
    };
    // 计划定制日期
    const datetime = ref('');
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      isShowDialog,
      fileList,
      responsibleDepartment,
      data,
      department,
      propse,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
      datetime,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      resetForm,
      emit,
      onUser,
      userFZRef,
      SearchUser,
      SearchFZUser
    };
  },
});
</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%;
}
//多行文本框
.textarea{
  height: 70px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 70px!important;
}
//弹窗底部边框线
::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;
}
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue

对比新文件
@@ -0,0 +1,219 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择应急预案" width="900px" draggable :fullscreen="full">
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" status-icon>
              <el-form-item>
                <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px;margin-right: 12px;" />
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" @click="onSubmit">查询</el-button>
                <el-button size="default" @click="submitReset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            style="width: 100%;
             margin-top: 20px"
            @cell-click="radio"
        >
          <el-table-column width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row" size="large">{{ null }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="预案名称" />
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="onHandleSizeChange"
              @current-change="onHandleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div v-if="dynamicTags[0] == '' ? false : true">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import { emergencyPlanApi } from '/@/api/contingencyManagement/emergencyPlan';
export default defineComponent({
  setup(props, { emit }) {
    const dialogVisible = ref<boolean>(false);
    const openDailog = () => {
      dialogVisible.value = true;
      onSubmit()
    };
    // 搜索条件
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        name: "", type: "", abolishStatus: false
      },
    });
    // 定义表格数据
    const tableData = ref([]);
    // 重置
    const submitReset = () => {
      listQuery.searchParams.name = '';
      onSubmit();
    };

    // 列表请求数据
    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 pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    // 分页未改变
    const onHandleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };
    // 右方点击添加后显示标签
    const dynamicTags = ref(['']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value = '';
    };
    const radio1 = ref('');
    const radio = (event: any) => {
      dynamicTags.value[0] = event;
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };

    const submitForm = () => {
      let obj = JSON.parse(JSON.stringify(dynamicTags.value));
      emit('SearchUser', obj[0]);
      dialogVisible.value = false;
    };
    onMounted(() => {
      onSubmit();
    });
    return {
      dialogVisible,
      openDailog,
      tableData,
      pageSize,
      pageIndex,
      onHandleSizeChange,
      onHandleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      radio1,
      radio,
      toggleFullscreen,
      FullScreen,
      full,
      submitReset,
      onMounted,
      listQuery,
      onSubmit,
      submitForm,
    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages {
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue

对比新文件
@@ -0,0 +1,392 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="button_Line">
        <div class="button_Left mb15">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
        </div>
        <div class="button_Right">
<!--          <el-button @click="upButton">-->
<!--            <el-icon>-->
<!--              <Upload />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button>-->
<!--            <el-icon>-->
<!--              <Download />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button>-->
<!--            <el-icon>-->
<!--              <Refresh />-->
<!--            </el-icon>-->
<!--          </el-button>-->
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="gmtModitify" label="修改时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <!--<el-button size="small" text type="primary" @click="releaseOfDrillPlan(0)">-->
              <!--<el-icon style="margin-right: 5px;">-->
                <!--<VideoPlay />-->
              <!--</el-icon>启动-->
            <!--</el-button>-->
            <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </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"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
<!--    <FlowChart ref="flowRef"></FlowChart>-->
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  // ElTable,
} from 'element-plus';
import {
  Plus,
  Delete,
  // Upload,
  // Download,
  // Refresh,
  View,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import {useRouter} from "vue-router"
import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue';
// import FlowChart from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/flowChart.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import { releaseDrillPlanApi } from '/@/api/contingencyManagement/emergencyDrillPlan';

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    EditPen,
    Plus,
    View,
    Delete,
    // Upload,
    // Download,
    // Refresh,
    VideoPlay,
    UpData,
    // FlowChart,
  },
  setup() {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        drillName: ''
      },
    });
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const listApi = async () => {
      let res = await releaseDrillPlanApi().getReleaseDrillPlanList(listQuery);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error',
        });
      }
    };
    onMounted(() => {
      listApi();
    });
    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }

    // 打开新增弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急演练计划发布',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 打开修改用户弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急演练计划发布',row,true);
      } else {
        addRef.value.openDialog('修改应急演练计划发布',row,false);
      }
    };
    // 打开修改用户弹窗
    // const flowRef = ref();
    // const onflowChart = (row: TableDataRow) => {
    //   flowRef.value.openDialog(row);
    // };
    // 删除
    const onRowDel = (id: number) => {
      let arr = [];
      arr.push(id)
      ElMessageBox.confirm('确定删除所选项吗?', '提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        releaseDrillPlanApi()
            .deleteReleaseDrillPlan(arr)
            .then((res) => {
              if (res.data.code == 200) {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'success',
                });
                listApi();
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
                listApi();
              }
            });
      })
          .catch(() => {});
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            releaseDrillPlanApi()
                .deleteReleaseDrillPlan(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      listApi();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      listApi();
    };
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr;
      // console.log(deletAll.value);
      if (val.length == 1) {
        danger.value = false;
      }  else if (val.length == 0) {
        danger.value = true;
      } else {
        danger.value = false;
      }
    };

    // 启动跳转
    const router=useRouter()
    const releaseOfDrillPlan=(data:string)=>{
      router.push({
        path:"/releaseOfDrillStart",
        query:{
          type:data
        }
      })
    }
    return {
      // upButton,
      // upShow,
      tableData,
      // onflowChart,
      // flowRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      View ,
      pageIndex,
      listQuery,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      router,
      releaseOfDrillPlan,
      listApi,
      danger,
      deletAll,
      handleSelectionChange,
      onMyAdd,
      onDeleteAll,
      onEdit,
      total,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue

对比新文件
@@ -0,0 +1,198 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急预案" prop="planName" >
              <el-input
                  v-model="ruleForm.planName"
                  placeholder="请选择"
                  class="input-with-select"
                  disabled
              >
                <template #append>
                  <el-button :icon="Search" disabled @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="备注">
              <el-input
                  class="textarea"
                  v-model="ruleForm.remark"
                  type="textarea"
                  maxlength="150"
                  placeholder="请填写备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" @click="resetForm(ruleFormRef)">关闭</el-button>
          <el-button size="default" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <AddEmergencyPersonnel ref="addRef" />
    <EditEmergencyPersonnel ref="editRef" />
  </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent
} from 'vue';
import type {
  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 AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue";
import {emergencyPlanLogApi} from "/@/api/contingencyManagement/emergencyPlanLog";

export default defineComponent({
  name: 'openEdit',
  components: {
    DailogSearchUser,
    AddEmergencyPersonnel,
    EditEmergencyPersonnel
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>();
    const ruleForm= ref({
      planId: '', //应急预案人员
      remark: '', // 备注
    })
    const titles = ref();
    const disabled = ref();

    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.planId=e.id
    };
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急预案启动记录' || title == '修改应急预案启动记录') {
        emergencyPlanLogApi()
            .seeEmergencyPlanLog(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
   // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
       if (title == '修改应急预案启动记录') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyPlanLogApi()
                .editEmergencyPlanLog(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 = {
          planId: '', //应急预案人员
          remark: '', // 备注
        };
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      Search,
      ruleFormRef,
      openUser,
      userRef,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
      ruleForm,
      submitForm,
      resetForm,
      isShowDialog,
      onUser,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 50px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 50px!important;
}
</style>

 src/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue

对比新文件
@@ -0,0 +1,242 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择应急预案" width="900px" draggable :fullscreen="full">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="18">
                <el-row>
                    <el-col :span="24">
                        <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" status-icon>
                            <el-form-item>
                                <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px" />
                            </el-form-item>
                            <el-form-item>
                                <el-select
                                    size="default"
                                    v-model="listQuery.searchParams.type"
                                    placeholder="请选择预案类型"
                                    class="ml10"
                                    style="max-width: 215px; margin-right: 12px"
                                >
                                    <el-option label="综合应急预案" value="1"></el-option>
                                    <el-option label="现场处置方案" value="2"></el-option>
                                    <el-option label="专项应急预案" value="3"></el-option>
                                    <el-option label="其他预案" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="default" type="primary" @click="onSubmit">查询</el-button>
                                <el-button size="default" @click="submitReset">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="24">
                        <el-button size="default" :icon="Delete" @click="submitReset" style="margin-top: 15px">清除选择</el-button>
                    </el-col>
                </el-row>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio">
                    <el-table-column width="55">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="预案名称" />
                    <el-table-column align="center" prop="type" label="预案类型">
                        <template #default="scope">
                            <span v-if="scope.row.type == '1'">综合应急预案</span>
                            <span v-if="scope.row.type == '2'">现场处置方案</span>
                            <span v-if="scope.row.type == '3'">专项应急预案</span>
                            <span v-if="scope.row.type == '4'">其他预案</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination
                        v-model:currentPage="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 30]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="onHandleSizeChange"
                        @current-change="onHandleCurrentChange"
                    />
                </div>
            </el-col>
            <el-col :span="6">
                <div v-if="dynamicTags[0] == '' ? false : true">
                    <el-tag
                        v-for="tag in dynamicTags"
                        :key="tag"
                        class="mx-1"
                        style="margin: 5px"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)"
                    >
                        {{ tag.name }}
                    </el-tag>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import { emergencyPlanLogApi } from '/@/api/contingencyManagement/emergencyPlanLog';
import { emergencyPlanApi } from '/@/api/contingencyManagement/emergencyPlan';
export default defineComponent({
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
            onSubmit();
        };
        // 搜索条件
        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 = '';
            radio1.value=""
            dynamicTags.value[0]=""
            onSubmit();
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            listQuery.pageSize = val;
        };
        // 分页未改变
        const onHandleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };

        const submitForm = () => {
            let obj = JSON.parse(JSON.stringify(dynamicTags.value));
            emit('SearchUser', obj[0]);
            dialogVisible.value = false;
        };
        onMounted(() => {
            onSubmit();
        });
        return {
            dialogVisible,
            openDailog,
            tableData,
            pageSize,
            pageIndex,
            onHandleSizeChange,
            onHandleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
            radio1,
            radio,
            toggleFullscreen,
            FullScreen,
            full,
            submitReset,
            onMounted,
            listQuery,
            onSubmit,
            submitForm,
            total,
        };
    },
});
</script>
<style scoped>
.el-form--inline .el-form-item {
    margin-bottom: 0;
    margin-right: 0;
}
/*分页*/
.pages {
    margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyPlanStartRecord/index.vue

对比新文件
@@ -0,0 +1,405 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="listQuery.searchParams.planName"
                placeholder="请选择应急预案"
                class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" @click="daiInpt"/>
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10" @click="onSubmit">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
            重置
          </el-button>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="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>
        </div>
        <div class="button_Right">
          <el-button>
            <el-icon>
              <Download />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Refresh />
            </el-icon>
          </el-button>
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="planName" label="应急预案" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="userName" label="启动人"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="startCreate" label="启动时间"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
<!--            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">-->
<!--              <el-icon style="margin-right: 5px;">-->
<!--                <EditPen />-->
<!--              </el-icon>修改-->
<!--            </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"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <SelectEmergencyPlan ref="showRef" @SearchUser="onUser"/>
    <OpenSee ref="editRef" @myAdd="onMyAdd" />
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
} from 'element-plus';
import {
  Search,
  Delete,
  // Upload,
  Download,
  Refresh,
  View,
  Edit,
  EditPen,
} from '@element-plus/icons-vue'
import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import SelectEmergencyPlan from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue'
import {emergencyPlanLogApi} from "/@/api/contingencyManagement/emergencyPlanLog";
import {contingencyApi} from "/@/api/contingencyManagement/contingency";

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenSee,
    View,
    EditPen,
    Edit,
    Delete,
    SelectEmergencyPlan,
    Download,
    Refresh,
  },
  setup() {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        planId: '',
      },
    });
    // 定义表格数据
    const tableData = ref([]);

    // 请求列表数据
    const onSubmit = async () => {
      let res = await emergencyPlanLogApi().getEmergencyPlanLogList(listQuery);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage.error(res.data.msg);
      }
    };
    //重置
    const submitReset = () => {
      listQuery.searchParams.planId = '';
      listQuery.searchParams.planName = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    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 editRef = ref();
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        editRef.value.openDialog('查看应急预案启动记录',row,true);
      }
      else {
        editRef.value.openDialog('修改应急预案启动记录',row,false);
      }
    };
    // 修改后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    // 应急预案
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    const onUser = (e:any) => {
      console.log(e)
      listQuery.searchParams.planId=e.id
      listQuery.searchParams.planName=e.name
    };
    // 删除用户
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        emergencyPlanLogApi()
            .deleteEmergencyPlanLog([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 onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencyPlanLogApi()
                .deleteEmergencyPlanLog(deleteAll.value)
                .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 pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      onSubmit();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    onMounted(() => {
      onSubmit();
    });
    return {
      upButton,
      upShow,
      tableData,
      editRef,
      onMyAdd,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      onSubmit,
      Search,
      daiInpt,
      showRef,
      onMounted,
      submitReset,
      listQuery,
      Edit,
      View,
      onEdit,
      onDeleteAll,
      deleteAll,
      warning,
      danger,
      total,
      onUser,
      handleSelectionChange,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//弹窗底部边框线
::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;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

在上述文件截断后对比
src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue
src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/inspect.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue
src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue
src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue
src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue
src/views/contingencyManagement/panManagement/component/abolishLibrary.vue
src/views/contingencyManagement/panManagement/component/approval.vue
src/views/contingencyManagement/panManagement/component/approvalProcess.vue
src/views/contingencyManagement/panManagement/component/initiateApproval.vue
src/views/contingencyManagement/panManagement/component/openAdd.vue
src/views/contingencyManagement/panManagement/component/startUp.vue
src/views/contingencyManagement/panManagement/component/upData.vue
src/views/contingencyManagement/panManagement/index.vue
src/views/contingencyManagement/processForm/component/formInformationTop.vue
src/views/contingencyManagement/processForm/component/formInformationTops.vue
src/views/contingencyManagement/processForm/component/lowerPlate.vue
src/views/contingencyManagement/processForm/processForm.vue
src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTop.vue
src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTops.vue
src/views/contingencyManagement/releaseOfDrillStart/component/lowerPlate.vue
src/views/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue
src/views/doublePrevent/riskCheckManage/checkTaskManage/checkWork/index.vue
src/views/doublePrevent/riskCheckManage/hiddenManagement/hiddenReport/index.vue
src/views/doublePrevent/riskLevel/action/components/riskControlMeasureDialog.vue
src/views/doublePrevent/riskLevel/action/index.vue
src/views/doublePrevent/riskLevel/device/index.vue
src/views/doublePrevent/riskLevel/event/components/safetyRiskEventDialog.vue
src/views/facilityManagement/EquipmentStatistics/index.vue
src/views/facilityManagement/InstrumentationInformation/index.vue
src/views/facilityManagement/ProductionEquipment/index.vue
src/views/facilityManagement/deviceType/component/Dailog.vue
src/views/facilityManagement/deviceType/index.vue
src/views/facilityManagement/keyEquipment/index.vue
src/views/facilityManagement/safetyEquipment/index.vue
src/views/goalManagement/Goalsummary/index.vue
src/views/goalManagement/IncentiveRecording/component/DailogAdd.vue
src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue
src/views/goalManagement/IncentiveRecording/index.vue
src/views/goalManagement/Incentivestandard/component/DailogAdd.vue
src/views/goalManagement/Incentivestandard/index.vue
src/views/goalManagement/TargetBook/component/DailogAdd.vue
src/views/goalManagement/TargetBook/component/DailogSearch.vue
src/views/goalManagement/TargetBook/index.vue
src/views/goalManagement/index.vue
src/views/goalManagement/performanceAppraisal/component/DailogAq.vue
src/views/goalManagement/performanceAppraisal/component/DailogKh.vue
src/views/goalManagement/performanceAppraisal/component/DailogKhS.vue
src/views/goalManagement/performanceAppraisal/component/DailogSearch.vue
src/views/goalManagement/performanceAppraisal/index.vue
src/views/goalManagement/processForms/component/formInformationTop.vue
src/views/goalManagement/processForms/component/formInformationTops.vue
src/views/goalManagement/processForms/component/lowerPlate.vue
src/views/goalManagement/processForms/processForms.vue
src/views/goalManagement/safetyAssessment/component/Dailog.vue
src/views/goalManagement/safetyAssessment/index.vue
src/views/goalManagement/targetDecompositionMonth/index.vue
src/views/goalManagement/targetDecompositionYear/component/Dailog.vue
src/views/goalManagement/targetDecompositionYear/component/DailogAdd.vue
src/views/goalManagement/targetDecompositionYear/index.vue
src/views/goalManagement/targetEscalation/component/Dailog.vue
src/views/goalManagement/targetEscalation/index.vue
src/views/goalManagement/targetImprovements/component/Dailogprove.vue
src/views/goalManagement/targetImprovements/index.vue
src/views/goalManagement/targetSettings/component/dailogAdd.vue
src/views/goalManagement/targetSettings/component/search.vue
src/views/goalManagement/targetSettings/index.vue
src/views/intellectInspect/inspectBigScreen/index.vue
src/views/intellectInspect/intelligentMap/index.vue
src/views/system/menu/component/menuDialog.vue
src/views/system/personShiftManage/teamManage/index.vue （已删除）
vite.config.ts