数据对接

13937891274

2022-07-28 191e2daab12f365990b24a5f47c2fac8474167dc

数据对接

 src/api/contingency/index.ts

@@ -4,45 +4,76 @@
    return{
        getTeamManagementList: (params: object) => {
            return request({
                url: '/emergencyTeam/page/list',
                url: `/emergencyTeam/page/list`,
                method: 'post',
                data:params
            })
        },
        // v1
        addEmergencyTeam: (data: object) => {
        // 应急队伍新增
        addEmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyTeam/add`,
                method: 'post',
                data: data
                data: params
            });
        },
        seeEmergencyTeam: (data: object) => {
        // 应急队伍详情
        seeEmergencyTeam: (params:number) => {
            return request({
                url: `/emergencyTeam/info/{id}`,
                method: 'post',
                data: data
                url: `/emergencyTeam/info/${params}`,
                method: 'get'
            });
        },
        // v1
        editEmergencyTeam: (data: object) => {
        // 应急队伍编辑
        editEmergencyTeam: (params: object) => {
            return request({
                url: `/emergencyTeam/update`,
                method: 'post',
                data: data
                data: params
            });
        },
        // v2
        // deleteEmergencyTeam: (value?: object) => {
        //     return request({
        //         url: `/emergencyTeam/batchDelete/{ids}`,
        //         method: 'get',
        //         data: value
        //     });
        // },
        deleteEmergencyTeam: (ids: number | null) => {
        // 应急队伍删除
        deleteEmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyTeam/batchDelete?depId=${ids}`,
                url: `/emergencyTeam/batchDelete/${params}`,
                method: 'get',
            });
        },
        // 应急队伍人员一览
        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/emergencyDrillEvaluation/index.ts

对比新文件
@@ -0,0 +1,44 @@
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/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/emergencyDrillExecute/index.ts

对比新文件
@@ -0,0 +1,44 @@
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:object) => {
            return request({
                url: `/emergencyDrillExecute/batchDelete/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/emergencyDrillPlan/index.ts

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

export function emergencyDrillPlanApi(){
    return{
        getEmergencyDrillPlanList: (params: object) => {
            return request({
                url: '/emergencyDrillPlan/page/list',
                method: 'post',
                data:params
            })
        },
        // v1
        addEmergencyDrillPlan: (data: object) => {
            return request({
                url: `/emergencyDrillPlan/add`,
                method: 'post',
                data: data
            });
        },
        seeEmergencyDrillPlan: (data: object) => {
            return request({
                url: `/emergencyDrillPlan/info/{id}`,
                method: 'post',
                data: data
            });
        },
        // v1
        editEmergencyDrillPlan: (data: object) => {
            return request({
                url: `/emergencyDrillPlan/update`,
                method: 'post',
                data: data
            });
        },
        // v2
        // deleteEmergencyDrillPlan: (value?: object) => {
        //     return request({
        //         url: `/emergencyTeam/batchDelete/{ids}`,
        //         method: 'get',
        //         data: value
        //     });
        // },
        // deleteEmergencyDrillPlan: (ids: number | null) => {
        //     return request({
        //         url: `/emergencyDrillPlan/batchDelete/{ids}}`,
        //         method: 'get',
        //     });
        // },
    }
}

 src/api/emergencyMaterialsInspection/index.ts

对比新文件
@@ -0,0 +1,44 @@
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/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/emergencyPlan/index.ts

@@ -2,6 +2,7 @@

export function emergencyPlanApi(){
    return{
        // 应急预案管理一览
        getEmergencyPlanList: (params: object) => {
            return request({
                url: '/emergencyPlan/page/list',
@@ -9,5 +10,35 @@
                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/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/emergencyPlanLog/index.ts

@@ -2,6 +2,7 @@

export function emergencyPlanLogApi(){
    return{
        // 应急预案启动记录一览
        getEmergencyPlanLogList: (params: object) => {
            return request({
                url: '/emergencyPlanLog/page/list',
@@ -9,5 +10,35 @@
                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/${params}`,
                method:"get",
            })
        },
    }
}

 src/api/emergencyResources/index.ts

@@ -1,21 +1,44 @@
import { METHODS } from 'http';
import request from '/@/utils/request';

export function emergencyResourcesApi(){
export function emergencySuppliesApi(){
    return{
        emergencySuppliesList:(params:object)=>{
        // 应急物资一览
        getEmergencySuppliesList:(params:object)=>{
            return request({
                url:"/emergencySupplies/page/list",
                method:'post',
                data:params,
            });
        },
        emergencySuppliesAdd:(params:object)=>{
        // 应急物资新增
        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/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/emergencySuppliesInspect/index.ts

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

export function emergencySuppliesInspectApi(){
    return{
        getEmergencySuppliesInspectList: (params: object) => {
            return request({
                url: '/emergencyTeam/page/list',
                method: 'post',
                data:params
            })
        },
        // v1
        addEmergencySuppliesInspect: (data: object) => {
            return request({
                url: `/emergencyTeam/add`,
                method: 'post',
                data: data
            });
        },
        seeEmergencySuppliesInspect: (data: object) => {
            return request({
                url: `/emergencyTeam/info/{id}`,
                method: 'post',
                data: data
            });
        },
        // v1
        editEmergencySuppliesInspect: (data: object) => {
            return request({
                url: `/emergencyTeam/update`,
                method: 'post',
                data: data
            });
        },
    }
}

 src/api/emergencySuppliesMaintain/index.ts

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

export function emergencySuppliesMaintainApi(){
    return{
        getEmergencySuppliesMaintainList: (params: object) => {
            return request({
                url: '/emergencyTeam/page/list',
                method: 'post',
                data:params
            })
        },
        // v1
        addEmergencySuppliesMaintain: (data: object) => {
            return request({
                url: `/emergencyTeam/add`,
                method: 'post',
                data: data
            });
        },
        seeEmergencySuppliesMaintain: (data: object) => {
            return request({
                url: `/emergencyTeam/info/{id}`,
                method: 'post',
                data: data
            });
        },
        // v1
        editEmergencySuppliesMaintain: (data: object) => {
            return request({
                url: `/emergencyTeam/update`,
                method: 'post',
                data: data
            });
        },
        // v2
        // deleteEmergencySuppliesMaintain: (value?: object) => {
        //     return request({
        //         url: `/emergencyTeam/batchDelete/{ids}`,
        //         method: 'get',
        //         data: value
        //     });
        // },
        deleteEmergencySuppliesMaintain: (ids: number | null) => {
            return request({
                url: `/emergencyTeam/batchDelete?depId=${ids}`,
                method: 'get',
            });
        },
    }
}

 src/api/maintenanceEmergencyMaterials/index.ts

对比新文件
@@ -0,0 +1,44 @@
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/${params}`,
                method: 'get',
            });
        },
    }
}

 src/api/workInjuryDeclaration/index.ts

对比新文件
@@ -0,0 +1,122 @@
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/${params}`,
                method: 'get',
            });
        },

        //  工伤申报一览
        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/components/DailogSearchUser/index.vue

@@ -89,8 +89,8 @@
        const names = ref<any>();
        const handleNodeClick = (data: Tree) => {
            console.log(data);
        };

        };
        const data: Tree[] = [
            {
                label: 'Level one 1',

 src/components/userSelections/index.vue

@@ -40,11 +40,12 @@
              <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" @change="radio">
                      <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
                    <el-radio-group v-model="radio1">
                      <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
@@ -141,7 +142,7 @@
  components: {
    // Search,
  },
  setup() {
  setup(props,{emit}) {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
@@ -153,6 +154,8 @@
    };
    // 取消
    const onCancel = () => {
      let obj=JSON.parse(JSON.stringify(dynamicTags.value))
      emit("SearchUser",obj[0])
      closeDialog();
    };

@@ -271,7 +274,7 @@
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('谭柏')
    const radio1=ref('')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }

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

@@ -16,13 +16,13 @@
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="姓名" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请输入姓名"></el-input>
            <el-form-item label="姓名" prop="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="teamLevel">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择人员性别">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="ruleForm.sex" class="w100" placeholder="请选择人员性别">
                <el-option label="男" value="admin"></el-option>
                <el-option label="女" value="common"></el-option>
              </el-select>
@@ -297,10 +297,12 @@
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
          closeDialog();
        } else {
          console.log('error submit!', fields)
        }
      })

    }
    // 应急队伍弹窗
    const Shows=ref()

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

@@ -41,7 +41,6 @@
                            <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" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
@@ -131,7 +130,7 @@
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '事故块表详情' || title == '修改事故快报') {
            if (title == '查看事故快报' || title == '修改事故快报') {
                accidentManagementSystemApi()
                    .accidentScarh(id)
                    .then((res) => {
@@ -236,12 +235,12 @@
                label: '生产运行部',
                children: [
                    {
                        value: '2-1',
                        value: '21',
                        label: '灌装一班',
                        children: [],
                    },
                    {
                        value: '2-2',
                        value: '22',
                        label: '工艺四班',
                        children: [],
                    },
@@ -252,12 +251,12 @@
                label: '设备部',
                children: [
                    {
                        value: '3-1',
                        value: '31',
                        label: '仪表班',
                        children: [],
                    },
                    {
                        value: '3-2',
                        value: '32',
                        label: '机修班',
                        children: [],
                    },
@@ -357,7 +356,8 @@
                        console.log('error submit!', fields);
                    }
                });
            } else if (title == '修改事故快报') {
            }
      else if (title == '修改事故快报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {

 src/views/accidentManagementSystem/accidentExpress/index.vue

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

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

@@ -1,9 +1,9 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建事故快报"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        width="800px"
        draggable
        :fullscreen="full"
    >
@@ -12,116 +12,163 @@
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
          :rules="rules"
          label-width="130px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故类别" prop="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-form-item label="事故快报" prop="accidentExpressId">
              <el-input
                  v-model="ruleForm.accidentExpressId"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故部门" placeholder="请选择" prop="accidentDepartmentId">
              <el-tree-select v-model="ruleForm.accidentDepartmentId" :data="data" class="w100" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故发生地点" prop="occurrencePlace">
              <el-input v-model="ruleForm.occurrencePlace" placeholder="请填写发生地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发生时间" prop="occurrenceTime">
              <el-date-picker v-model="ruleForm.occurrenceTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" class="w100" placeholder="选择日期时间" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故类别" prop="accidentType">
              <el-select v-model="ruleForm.accidentType" class="w100" placeholder="请选择">
                <el-option label="人员伤亡事故" value="人员伤亡事故"></el-option>
                <el-option label="火灾爆炸事故" value="火灾爆炸事故"></el-option>
                <el-option label="危险品泄露事故" value="危险品泄露事故"></el-option>
                <el-option label="设备事故" value="设备事故"></el-option>
                <el-option label="工艺事故" value="工艺事故"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故等级" prop="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-form-item label="事故等级" prop="accidentGrade">
              <el-select v-model="ruleForm.accidentGrade" class="w100" placeholder="请选择">
                <el-option label="特别重大" value="人员伤亡事故"></el-option>
                <el-option label="重大" value="重大"></el-option>
                <el-option label="较大" value="较大"></el-option>
                <el-option label="一般" value="一般"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="经济损失" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
            <el-form-item label="经济损失" prop="economicLoss">
              <el-input v-model="ruleForm.economicLoss" placeholder="请填写经济损失"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="轻伤人数" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写轻伤人数"></el-input>
            <el-form-item label="轻伤人数" prop="minorInjuryNum">
              <el-input v-model="ruleForm.minorInjuryNum" placeholder="请填写轻伤人数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="重伤人数" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写重伤人数"></el-input>
            <el-form-item label="重伤人数" prop="seriousInjuryNum">
              <el-input v-model="ruleForm.seriousInjuryNum" placeholder="请填写重伤人数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="死亡人数" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写死亡人数"></el-input>
            <el-form-item label="死亡人数" prop="deathNum">
              <el-input v-model="ruleForm.deathNum" placeholder="请填写死亡人数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故原因" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写事故原因"></el-input>
            <el-form-item label="事故原因" prop="accidentCause">
              <el-input v-model="ruleForm.accidentCause" placeholder="请填写事故原因"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="要求报告完成期限" prop="telephone">
            <el-form-item label="要求报告完成期限" prop="reportDeadline">
              <el-date-picker
                  v-model="value1"
                  v-model="ruleForm.reportDeadline"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故级别" prop="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-form-item label="事故级别" prop="accidentLevel">
              <el-select v-model="ruleForm.accidentLevel" class="w100" placeholder="请选择">
                <el-option label="特大事故" value="特大事故"></el-option>
                <el-option label="重大事故" value="重大事故"></el-option>
                <el-option label="较大事故" value="较大事故"></el-option>
                <el-option label="一般事故" value="一般事故"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故延期申请" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写事故原因"></el-input>
            <el-form-item label="事故延期申请" prop="accidentDelayApply">
              <el-input v-model="ruleForm.accidentDelayApply" placeholder="请填写事故延期申请"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="原因综合分析(直接分析)">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
            <el-form-item label="原因综合分析(直接分析)" prop="comprehensiveAnalysisDirect">
              <el-input v-model="ruleForm.comprehensiveAnalysisDirect" type="textarea" placeholder="请填写原因综合分析(直接分析)" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="原因综合分析(间接分析)">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
            <el-form-item label="原因综合分析(间接分析)" prop="comprehensiveAnalysisIndirect">
              <el-input v-model="ruleForm.comprehensiveAnalysisIndirect" type="textarea" placeholder="请填写原因综合分析(间接分析)" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="整改措施">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
            <el-form-item label="整改措施" prop="rectificationMeasures">
              <el-input v-model="ruleForm.rectificationMeasures" type="textarea" placeholder="请填写整改措施" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故处理">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
            <el-form-item label="事故处理" prop="accidentHandling">
              <el-input v-model="ruleForm.accidentHandling" type="textarea" placeholder="请填写事故处理" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="填写人">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
            <el-form-item label="填写人" prop="fillInUserUid">
              <el-input
                  v-model="ruleForm.fillInUserUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="填写日期" prop="telephone">
            <el-form-item label="填写日期" prop="fillInTime">
              <el-date-picker
                  v-model="value1"
                  v-model="ruleForm.fillInTime"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="事故照片">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
<!--            <el-form-item label="事故照片">-->
<!--              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="相关人员笔录">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写相关人员笔录" maxlength="150"></el-input>
              <el-input v-model="ruleForm.relevantPersonnelRecords" type="textarea" placeholder="请填写相关人员笔录" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@@ -144,20 +191,20 @@
          </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" placeholder="请填写其他材料" maxlength="150"></el-input>
              <el-input v-model="ruleForm.otherMaterials" type="textarea" placeholder="请填写其他材料" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <AccidentName ref="Shows"/>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>
@@ -172,40 +219,74 @@
import type {
  UploadUserFile,
  FormInstance,
  // FormRules,
  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 DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'
import {emergencySuppliesApi} from "/@/api/emergencyResources";
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    const ruleForm = ref ({
      accidentExpressId: '',
      accidentType: '',
      accidentGrade: '',
      economicLoss: '',
      minorInjuryNum: '',
      seriousInjuryNum: '',
      deathNum: '',
      accidentCause: '',
      reportDeadline: '',
      accidentLevel: '',
      accidentDelayApply: '',
      comprehensiveAnalysisDirect: '',
      comprehensiveAnalysisIndirect: '',
      rectificationMeasures: '',
      accidentHandling: '',
      fillInUserUid: '',
      fillInTime: '',
      relevantPersonnelRecords: '',
      otherMaterials: '',
      fileList: [
        {
          fileUrl: '',
          fileName: '',
        }
      ],
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看事故报告' || title == '修改事故报告') {
        accidentManagementSystemApi()
            .seeAccidentReport(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    // 关闭弹窗
    const closeDialog = () => {
@@ -227,11 +308,11 @@
        label: 'Level one 1',
        children: [
          {
            value: '1-1',
            value: '11',
            label: 'Level two 1-1',
            children: [
              {
                value: '1-1-1',
                value: '111',
                label: 'Level three 1-1-1',
              },
            ],
@@ -243,21 +324,21 @@
        label: 'Level one 2',
        children: [
          {
            value: '2-1',
            value: '21',
            label: 'Level two 2-1',
            children: [
              {
                value: '2-1-1',
                value: '211',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '2-2',
            value: '22',
            label: 'Level two 2-2',
            children: [
              {
                value: '2-2-1',
                value: '221',
                label: 'Level three 2-2-1',
              },
            ],
@@ -269,21 +350,21 @@
        label: 'Level one 3',
        children: [
          {
            value: '3-1',
            value: '31',
            label: 'Level two 3-1',
            children: [
              {
                value: '3-1-1',
                value: '311',
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            value: '3-2',
            value: '32',
            label: 'Level two 3-2',
            children: [
              {
                value: '3-2-1',
                value: '321',
                label: 'Level three 3-2-1',
              },
            ],
@@ -299,7 +380,7 @@
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            value: '11',
            label: '经营班子',
            children: [],
          },
@@ -310,12 +391,12 @@
        label: '生产运行部',
        children: [
          {
            value: '2-1',
            value: '21',
            label: '灌装一班',
            children: []
          },
          {
            value: '2-2',
            value: '22',
            label: '工艺四班',
            children: [],
          },
@@ -326,12 +407,12 @@
        label: '设备部',
        children: [
          {
            value: '3-1',
            value: '31',
            label: '仪表班',
            children: [],
          },
          {
            value: '3-2',
            value: '32',
            label: '机修班',
            children: [],
          },
@@ -339,61 +420,196 @@
      },
    ]
    // 必填项提示
    // const rules = reactive<FormRules>({
    //   teamName: [
    //     {
    //       required: true,
    //       message: '队伍名称不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLevel: [
    //     {
    //       required: true,
    //       message: '队伍级别不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamLeader: [
    //     {
    //       required: true,
    //       message: '队伍负责人不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   responsibleDepartment: [
    //     {
    //       required: true,
    //       message: '负责人部门不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   teamPhone: [
    //     {
    //       required: true,
    //       message: '负责人手机不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    //   telephone: [
    //     {
    //       required: true,
    //       message: '固定电话不能为空',
    //       trigger: 'change',
    //     },
    //   ],
    // })
    const rules = reactive<FormRules>({
      accidentDepartmentId: [
        {
          required: true,
          message: '事故部门不能为空',
          trigger: 'change',
        },
      ],
      occurrenceTime: [
        {
          required: true,
          message: '发生时间不能为空',
          trigger: 'change',
        },
      ],
      accidentType: [
        {
          required: true,
          message: '事故类别不能为空',
          trigger: 'change',
        },
      ],
      accidentGrade: [
        {
          required: true,
          message: '事故等级不能为空',
          trigger: 'change',
        },
      ],
      economicLoss: [
        {
          required: true,
          message: '经济损失不能为空',
          trigger: 'change',
        },
      ],
      reportDeadline: [
        {
          required: true,
          message: '要求报告完成期限不能为空',
          trigger: 'change',
        },
      ],
      accidentLevel: [
        {
          required: true,
          message: '事故级别不能为空',
          trigger: 'change',
        },
      ],
      comprehensiveAnalysisDirect: [
        {
          required: true,
          message: '原因综合分析(直接分析)不能为空',
          trigger: 'blur',
        },
      ],
      comprehensiveAnalysisIndirect: [
        {
          required: true,
          message: '原因综合分析(间接分析)不能为空',
          trigger: 'blur',
        },
      ],
      rectificationMeasures: [
        {
          required: true,
          message: '整改措施不能为空',
          trigger: 'blur',
        },
      ],
      accidentHandling: [
        {
          required: true,
          message: '事故处理不能为空',
          trigger: 'change',
        },
      ],
      fillInUserUid: [
        {
          required: true,
          message: '填写人不能为空',
          trigger: 'change',
        },
      ],
      fillInTime: [
        {
          type: 'date',
          required: true,
          message: '填写日期不能为空',
          trigger: 'change',
        },
      ],
    })
    // 表单提交验证必填项
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建事故报告') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            accidentManagementSystemApi()
                .addAccidentReport(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
      else if (title == '修改事故报告') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            accidentManagementSystemApi()
                .editAccidentReport(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: '修改成功',
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
        formEl.resetFields();
        ruleForm.value = {
          accidentExpressId: '',
          accidentType: '',
          accidentGrade: '',
          economicLoss: '',
          minorInjuryNum: '',
          seriousInjuryNum: '',
          deathNum: '',
          accidentCause: '',
          reportDeadline: '',
          accidentLevel: '',
          accidentDelayApply: '',
          comprehensiveAnalysisDirect: '',
          comprehensiveAnalysisIndirect: '',
          rectificationMeasures: '',
          accidentHandling: '',
          fillInUserUid: '',
          fillInTime: '',
          relevantPersonnelRecords: '',
          otherMaterials: '',
          fileList: [
            {
              fileUrl: '',
              fileName: '',
            }
          ],
        }
      })
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
@@ -407,7 +623,10 @@
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.fillInUserUid=e.id
    };
    //全屏
    const full = ref(false);
@@ -435,7 +654,7 @@
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      rules,
      openUser,
      userRef,
      regionsDialog,
@@ -443,6 +662,11 @@
      toggleFullscreen,
      FullScreen,
      full,
      onUser,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
});

 src/views/accidentManagementSystem/accidentReport/index.vue

@@ -10,73 +10,60 @@
                  <Plus />
                </el-icon>新建
              </el-button>
              <el-button size="default" type="warning" plain disabled>
              <el-button size="default" type="warning" plain :disabled="warning">
                <el-icon>
                  <Edit />
                </el-icon>修改
              </el-button>
              <el-button size="default" type="danger" plain disabled>
              <el-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>
<!--              <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="teamName" label="事故名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="teamLevel" label="事故部门" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="teamDescription" label="事故类别" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="phone" label="事故等级" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="attachments" label="发生地点" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="attachments" label="发生时间" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentExpressId" label="事故名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentDepartmentId" label="事故部门" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="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 disabled>
                  <el-icon style="margin-right: 5px;">
                    <EditPen />
                  </el-icon>评价
                <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
                  <el-icon style="margin-right: 5px"> <View /> </el-icon>查看
                </el-button>
                <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)">
                  审批进度
                <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="onApprovalProgress(scope.row)">
                  <el-icon style="margin-right: 5px;">
                    <EditPen />
                  </el-icon>查看评价
                </el-button>
                <el-button size="small" text type="primary" @click="onRectificationDialog(scope.row)">
                  <el-icon style="margin-right: 5px;">
                    <EditPen />
                  </el-icon>整改
                </el-button>
                <el-button size="small" text disabled @click="onOpenEdit(scope.row)">
                  查看整改
                </el-button>
                <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -86,9 +73,6 @@
                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"
@@ -99,24 +83,23 @@
        <el-tab-pane label="已处理" name="second"></el-tab-pane>
      </el-tabs>
    </el-card>
    <OpenAdd ref="addRef" />
    <ApprovalProgress ref="approvalRef" />
    <RectificationDialog ref="rectificationRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
    <OpenAdd ref="addRef" @myAdd="onMyAdd" />
<!--    <upData ref="upShow"></upData>-->
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElTable,
  // ElTable,
  ElMessageBox,
  ElMessage,
  TabsPaneContext,
} from 'element-plus';
import {
@@ -125,47 +108,18 @@
  Download,
  Refresh,
  EditPen,
  View,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/accidentManagementSystem/accidentReport/component/openAdd.vue'
import ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue';
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";

// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  teamPhone: string
  phone: string;
  describe: string;
  responsibleDepartment: string
  teamLeader: string

}

// 定义接口来定义对象的类型
interface TableDataRow {
  // userName: string;
  // userNickname: string;
  // roleSign: string;
  // department: string[];
  // phone: string;
  // email: string;
  // sex: string;
  // password: string;
  // overdueTime: Date;
  // // describe: string;
  // createTime: string;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenEdit,
    EditPen,
    Plus,
    Upload,
@@ -175,129 +129,183 @@
    Edit,
    Delete,
    OpenAdd,
    ApprovalProgress,
    RectificationDialog
    View,
  },
  setup() {
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        name: '',
      },
    });
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
    const tableData = ref([]);
    // 请求列表数据
    const listApi = async () => {
      let res = await accidentManagementSystemApi().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.toString();
      // console.log(deletAll.value);
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
    // 页面加载时
    onMounted(() => {
      listApi();
    });
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建事故报告',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 打开修改用户弹窗
    const editRef = ref();
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看事故报告',row,true);
      } else {
        addRef.value.openDialog('修改事故报告',row,false);
      }
    };
    // 审批进度弹窗
    const approvalRef = ref();
    const onApprovalProgress = () => {
      approvalRef.value.openDialog();
    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 删除用户
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            accidentManagementSystemApi()
                .deleteAccidentReport(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 rectificationRef = ref();
    const onRectificationDialog = () => {
      rectificationRef.value.openDialog();
    // 多选删除
    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(4);
    const pageSize = ref(10);
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
      listQuery.pageSize = val;
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
      listQuery.pageIndex = val;
    };
    return {
      onOpenAdd,
      addRef,
      activeName,
      handleClick,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      // upButton,
      // upShow,
      tableData,
      onOpenEdit,  //编辑
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      onApprovalProgress,
      approvalRef,
      onRectificationDialog,
      rectificationRef,
      listApi,
      handleSelectionChange,
      warning,
      danger,
      listQuery,
      onRowDel,
      total,
      onMyAdd,
      onDeleteAll,
      onEdit,
    };
  },
});

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

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建事故快报"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,33 +13,34 @@
          :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="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写申报人姓名"></el-input>
            <el-form-item label="申报人姓名" prop="declareUserName">
              <el-input v-model="ruleForm.declareUserName" placeholder="请填写申报人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="申报人性别">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="男" />
                <el-radio label="女" />
              <el-radio-group v-model="ruleForm.declareUserGender">
                <el-radio :label="false">男</el-radio>
                <el-radio :label="true">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="申报人部门"  placeholder="请选择">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  v-model="ruleForm.declareDepartmentId"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故名称" prop="teamLeader">
            <el-form-item label="事故名称" prop="accidentExpressId">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.accidentExpressId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -50,52 +51,54 @@
            </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-form-item label="事故发生时间" prop="occurrenceTime">
              <el-date-picker
                  v-model="value1"
                  v-model="ruleForm.occurrenceTime"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="工伤类型" prop="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-form-item label="工伤类型" prop="workInjuryType">
              <el-select v-model="ruleForm.workInjuryType" class="w100" placeholder="请选择">
                <el-option label="轻微伤" value="轻微伤"></el-option>
                <el-option label="轻伤" value="轻伤"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="申报日期">
              <el-date-picker
                  v-model="value1"
                  v-model="ruleForm.declareDate"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="损失工时" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写损失工时"></el-input>
            <el-form-item label="损失工时" prop="lostTime">
              <el-input v-model="ruleForm.lostTime" placeholder="请填写损失工时"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="就诊医院" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写就诊医院"></el-input>
            <el-form-item label="就诊医院" prop="visitHospital">
              <el-input v-model="ruleForm.visitHospital" placeholder="请填写就诊医院"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="就诊结果" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写就诊结果"></el-input>
            <el-form-item label="就诊结果" prop="visitResult">
              <el-input v-model="ruleForm.visitResult" placeholder="请填写就诊结果"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="相关附件">
              <el-upload
                  v-model:file-list="fileList"
                  v-model:file-list="ruleForm.fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
@@ -111,30 +114,30 @@
            </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 label="注意事项" prop="mattersNeedingAttention">
              <el-input v-model="ruleForm.mattersNeedingAttention" placeholder="请填写注意事项"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="材料是否齐全">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="是" />
                <el-radio label="否" />
              <el-radio-group v-model="ruleForm.completeMaterials">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="备注">
              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写备注" maxlength="150"></el-input>
              <el-input v-model="ruleForm.remark" type="textarea" placeholder="请填写备注" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
@@ -146,7 +149,7 @@

<script lang="ts">
import {
  reactive,
  // reactive,
  ref,
  defineComponent
} from 'vue';
@@ -155,7 +158,7 @@
  UploadUserFile,
  FormInstance,
} from 'element-plus'

import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
@@ -163,6 +166,8 @@
import UserSelections from "/@/components/userSelections/index.vue"
import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'
import {emergencySuppliesApi} from "/@/api/emergencyResources";
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";

export default defineComponent({
  name: 'openAdd',
@@ -171,30 +176,47 @@
    UserSelections,
    RegionsDialog,
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    const ruleForm = ref ({
      declareUserName: '',
      declareUserGender: '',
      declareDepartmentId: '',
      accidentExpressId: '',
      workInjuryType: '',
      declareDate: '',
      lostTime: '',
      visitHospital: '',
      visitResult: '',
      mattersNeedingAttention: '',
      completeMaterials: '',
      remark: '',
      fileList: [
        {
          fileName: '',
          fileUrl: '',
        }
      ],
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
      titles.value = title;
      disabled.value = type;
      if (title == '查看工伤申报' || title == '修改工伤申报') {
        accidentManagementSystemApi()
            .seeAccidentManagementSystem(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
@@ -208,11 +230,11 @@
        label: 'Level one 1',
        children: [
          {
            value: '1-1',
            value: '11',
            label: 'Level two 1-1',
            children: [
              {
                value: '1-1-1',
                value: '111',
                label: 'Level three 1-1-1',
              },
            ],
@@ -224,21 +246,21 @@
        label: 'Level one 2',
        children: [
          {
            value: '2-1',
            value: '21',
            label: 'Level two 2-1',
            children: [
              {
                value: '2-1-1',
                value: '211',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '2-2',
            value: '22',
            label: 'Level two 2-2',
            children: [
              {
                value: '2-2-1',
                value: '221',
                label: 'Level three 2-2-1',
              },
            ],
@@ -250,21 +272,21 @@
        label: 'Level one 3',
        children: [
          {
            value: '3-1',
            value: '31',
            label: 'Level two 3-1',
            children: [
              {
                value: '3-1-1',
                value: '311',
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            value: '3-2',
            value: '32',
            label: 'Level two 3-2',
            children: [
              {
                value: '3-2-1',
                value: '321',
                label: 'Level three 3-2-1',
              },
            ],
@@ -280,7 +302,7 @@
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            value: '11',
            label: '经营班子',
            children: [],
          },
@@ -291,12 +313,12 @@
        label: '生产运行部',
        children: [
          {
            value: '2-1',
            value: '21',
            label: '灌装一班',
            children: []
          },
          {
            value: '2-2',
            value: '22',
            label: '工艺四班',
            children: [],
          },
@@ -307,12 +329,12 @@
        label: '设备部',
        children: [
          {
            value: '3-1',
            value: '31',
            label: '仪表班',
            children: [],
          },
          {
            value: '3-2',
            value: '32',
            label: '机修班',
            children: [],
          },
@@ -364,22 +386,101 @@
    //     },
    //   ],
    // })

    // 事故名称弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 表单提交验证必填项
    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 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=()=>{
@@ -402,9 +503,7 @@
    return {
      daiInpt,
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
@@ -424,6 +523,10 @@
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
});

 src/views/accidentManagementSystem/workInjuryDeclaration/index.vue

@@ -2,9 +2,9 @@
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="80px" :inline="true">
                <el-form ref="ruleFormRef" size="default" label-width="80px" :inline="true">
                    <el-form-item prop="telephone">
                        <el-input v-model="ruleForm.searchParams.accidentExpressId" placeholder="请选择应急物资" class="input-with-select">
                        <el-input v-model="listQuery.searchParams.accidentExpressId" placeholder="请选择应急物资" class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" @click="daiInpt" />
                            </template>
@@ -19,10 +19,10 @@
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon> <Plus /> </el-icon>新建
                    </el-button>
                    <el-button size="default" type="warning" plain disabled>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon> <Edit /> </el-icon>修改
                    </el-button>
                    <el-button size="default" type="danger" plain disabled>
                    <el-button size="default" type="danger" plain @click="onDeleteAll" :disabled="danger">
                        <el-icon> <Delete /> </el-icon>删除
                    </el-button>
                </div>
@@ -44,42 +44,46 @@
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef">
            <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="teamDescription" label="事故名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="phone" label="工商类型" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="attachments" label="申报日期" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="attachments" label="就诊医院" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="declareUserName" label="申报人名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="declareDepartmentId" label="申报人部门" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="accidentExpressId" 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)">
            <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="onOpenEdit(scope.row)"> 删除 </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="40"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
        <AccidentName ref="showRef" />
        <OpenAdd ref="addRef" />
        <OpenEdit ref="editRef" />
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
<!--        <OpenEdit ref="editRef" />-->
        <upData ref="upShow"></upData>
    </div>
</template>
@@ -93,24 +97,26 @@
    defineComponent,
    onMounted,
} from 'vue';
import { ElTable, ElMessage } from 'element-plus';
import { Plus, Download, Refresh, EditPen, Edit, Delete, Search, Upload } from '@element-plus/icons-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';
// 定义表格数据类型
interface User {
    teamName: string;
    teamLevel: string;
    teamDescription: string;
    teamPhone: string;
    phone: string;
    describe: string;
    responsibleDepartment: string;
    teamLeader: string;
}

export default defineComponent({
    name: 'index',
@@ -122,15 +128,15 @@
        Download,
        Refresh,
        Edit,
    View,
        Delete,
        UpData,
        OpenAdd,
        AccidentName,
    },
    setup() {
        const ruleFormRef = ref();
        //定义表单
        const ruleForm = reactive({
        //列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
@@ -139,26 +145,47 @@
        });
        // 定义表格数据
        const tableData = ref([]);
        // 列表请求
        const listApi = () => {
            accidentManagementSystemApi()
                .workList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
              tableData.value=res.data.data
                    } else {
             ElMessage.error(res.data.msg)
                    }
                });
        // 请求列表数据
        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=()=>{
    ruleForm.searchParams.accidentExpressId=""
    listQuery.searchParams.accidentExpressId=""
    listApi();
  }
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      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 = () => {
@@ -167,11 +194,16 @@
        // 打开新增弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog();
            addRef.value.openDialog('新建工伤申报',false);
        };
        const multipleTableRef = ref<InstanceType<typeof ElTable>>();
        const multipleSelection = ref<User[]>([]);

    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
        // 上传
        const upShow = ref();
        const upButton = () => {
@@ -179,26 +211,89 @@
        };

        // 打开修改用户弹窗
        const editRef = ref();
        const onEdit = (row: TableDataRow) => {
            editRef.value.openDialog(row);
        // const editRef = ref();
        const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看工伤申报',row,true);
      } else {
        addRef.value.openDialog('修改工伤申报',row,false);
      }
        };
        // 分页
        const pageIndex = ref(4);
        const pageSize = ref(10);
    // 删除用户
    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) => {
            console.log(`${val} items per page`);
      listQuery.pageSize = val;
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
      listQuery.pageIndex = val;
        };
        return {
            daiInpt,
            showRef,
            multipleSelection,
            multipleTableRef,
            upButton,
            upShow,
            tableData,
@@ -209,12 +304,18 @@
            onEdit,
            onOpenAdd,
            addRef,
            editRef,
            ruleFormRef,
            // editRef,
            listApi,
            ruleForm,
            Search,
      submitReset
      submitReset,
      onDeleteAll,
      handleSelectionChange,
      warning,
      danger,
      listQuery,
      onRowDel,
      total,
      onMyAdd,
        };
    },
});

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

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="title"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,17 +13,18 @@
          :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="selectPeople">
            <el-form-item label="选择人员" prop="userUid">
              <el-input
                  v-model="ruleForm.selectPeople"
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -34,13 +35,13 @@
            </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 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="personnelGender">
              <el-radio-group v-model="ruleForm.personnelGender">
            <el-form-item label="人员性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
@@ -61,11 +62,12 @@
      <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>
                    <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>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
  </div>
</template>

@@ -80,25 +82,29 @@
  FormRules,
  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 {contingencyApi} from "/@/api/contingency";

export default defineComponent({
  name: 'addTeamLeader',
  components: {
    // Search,
    DailogSearchUser
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
      selectPeople: '', // 选择人员
      jobNumber: '', //人员工号
      personnelName: '', // 人员名称
      personnelGender: '', // 人员性别
    const ruleForm = ref ({
      teamId: '',
      userUid: '',
      gender: '',
      jobNumber: '', // 人员工号
      name: '', // 人员名称
      phone: '', // 手机号码
      position: '', // 职位
    });
@@ -139,27 +145,107 @@
        },
      ],
    })
    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 titles = ref();
    const disabled = ref();
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急队伍人员') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            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()
                .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 = {
          teamId: '',
          userUid: '',
          gender: '',
          jobNumber: '', // 人员工号
          name: '', // 人员名称
          phone: '', // 手机号码
          position: '', // 职位
        };
      }
    }
    // 打开弹窗
    const openDialog = () => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      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.id
    };
    //全屏
    const full = ref(false);
@@ -172,17 +258,24 @@
    };
    return {
      openDialog,
      closeDialog,
      // closeDialog,
      isShowDialog,
      ruleFormRef,
      submitForm,
      onCancel,
      // onCancel,
      ruleForm,
      rules,
      Search,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      openUser,
      userRef,
      onUser,
    };
  },
});

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

@@ -1,137 +1,106 @@
<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
          ref="ruleFormRef"
          :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" placeholder="请填写队伍名称" disabled="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="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-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="请选择"
                  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"
                  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">新增</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>
      <template #footer>
    <span class="dialog-footer">
     <el-button @click="isShowDialog = !isShowDialog"  size="default">关闭</el-button>
          <el-button size="default" type="primary"  @click="onSubmit">确定</el-button>
    </span>
      </template>
    </el-dialog>
    <AddEmergencyPersonnel ref="addRef" />
    <UserSelections ref="userRef"/>
  </div>
    <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" :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="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="请选择" 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" 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">新增</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="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="200" align="center">
                                    <template #default="scope">
                                        <el-button disabled size="small" @click="onEdit('详情',scope.row.id)" >查看 </el-button>
                                        <el-button disabled size="small" @click="onEdit('详情',scope.row.id)" style="margin-right: 5px">编辑 </el-button>
                                        <el-button 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"/>
        <DailogSearchUser ref="userRef" @SearchUser="onUser" />
    </div>
</template>

<script lang="ts">
@@ -139,13 +108,17 @@
  reactive,
  ref,
  defineComponent,
  toRefs,
  // toRefs,
} from 'vue';
import { ElMessage } from 'element-plus';
import {
  ElMessage,
  ElMessageBox,
} from 'element-plus';

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

@@ -154,86 +127,62 @@
  FullScreen
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import UserSelections from "/@/components/userSelections/index.vue"
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import {contingencyApi} from "/@/api/contingency";
// 定义表格数据类型
interface User {
  personnelName: string
  jobNo: string
  phone: string;
  position: string;
}
// import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";




// 定义接口来定义对象的类型
interface MenuDataTree {
  id: number;
  label: string;
  children?: MenuDataTree[];
}
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: 'openAdd',
  components: {
    AddEmergencyPersonnel,
    UserSelections,
    DailogSearchUser,
  },
  setup(prop,context) {
    const state = reactive<RoleState>({
      isShowDialog: false,
      title:'',
      // buttonName:'',
      ruleForm: {
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();
    const ruleForm =ref({
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        principalUid: 1, // 队伍负责人
        principalDepartmentId: 2,  //负责人部门
        principalUid: '', // 队伍负责人
        principalDepartmentId: '',  //负责人部门
        principalPhone: '', // 负责人手机
        telephoneNumber: '', // 固定电话
        teamDesc: '',  //队伍描述
        fileList: [],
      },
      menuData: [],
    });
        fileList: [
          {
            fileUrl: 'url',
            fileName: 'name',
          }
        ],
        // memberList: [
        //   {
        //     userUid: '',
        //     gender: '',
        //     jobNumber: '',
        //     name: '',
        //     phone: '',
        //     position: '',
        //   }
        // ]
      });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    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 openDialog = (title: string,id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急队伍管理' || title == '修改应急队伍管理') {
        contingencyApi()
            .seeEmergencyTeam(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    }
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])

@@ -245,7 +194,7 @@
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            value: '11',
            label: '经营班子',
            children: [],
          },
@@ -256,12 +205,12 @@
        label: '生产运行部',
        children: [
          {
            value: '2-1',
            value: '21',
            label: '灌装一班',
            children: []
          },
          {
            value: '2-2',
            value: '22',
            label: '工艺四班',
            children: [],
          },
@@ -272,12 +221,12 @@
        label: '设备部',
        children: [
          {
            value: '3-1',
            value: '31',
            label: '仪表班',
            children: [],
          },
          {
            value: '3-2',
            value: '32',
            label: '机修班',
            children: [],
          },
@@ -287,24 +236,17 @@
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.principalUid=e.id
    };
    //定义tabs切换
    const activeName = ref('first')

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

    //定义表格数据
    const multipleSelection = ref<User[]>([])
    const tableData: User[] = []

    //添加队伍负责人弹窗
    const addRef = ref();
    const onAddEmergencyPersonnel = () => {
      addRef.value.openDialog();
    };
    // 必填项提示
    const rules = reactive<FormRules>({
      teamName: [
@@ -359,81 +301,231 @@
        full.value = false;
      }
    };
    // 新增
    const onSubmit = async () => {
      if(state.title === '新建应急队伍管理'){
        let res = await contingencyApi().addEmergencyTeam(state.ruleForm)
        if(res.data.code === '200'){
          ElMessage({
            type:'success',
            message:'队伍新增成功',
            // duration:2000
          })
          state.isShowDialog = false
          context.emit('refreshRoleList')
        }else{
          ElMessage({
            type:'warning',
            message:res.data.msg
          })
        }
    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: [
          //   {
          //     userUid: '',
          //     gender: '',
          //     jobNumber: '',
          //     name: '',
          //     phone: '',
          //     position: '',
          //   }
          // ]
        };
      }
    else{
        let res = await contingencyApi().editEmergencyTeam(state.ruleForm)
        if(res.data.code === '200'){
          ElMessage({
            type:'success',
            message:'队伍修改成功',
            // duration:2000
          })
          state.isShowDialog = false
          context.emit('refreshRoleList')
        }else{
          ElMessage({
            type:'warning',
            message:res.data.msg
          })
        }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 列表参数
    // const listQuery = ref ({
    //   teamId: ''
    // });
    // 列表数据请求
    // const listApi = async (title: string, formEl: FormInstance | undefined) => {
    //   if (!formEl) return;
    //   await formEl.validate((valid, fields) => {
    //     if (valid) {
    //       isShowDialog.value = false;
    //       contingencyApi()
    //           .getEmergencyTeamPersonnelList(listQuery)
    //           .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);
    //     }
    //   });
    //   formEl.resetFields();
    //   const listQuery = {
    //     teamId: ''
    //   };
    // };
    // 定义表格数据
    const tableData = ref([]);
    //添加队伍负责人弹窗
    const addRef = ref();
    const onAddEmergencyPersonnel = () => {
      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 = (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',
                });
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
              }
            });
      })
          .catch(() => {});
    };
    return {
      openDialog,
      // closeDialog,
      // isShowDialog,
      // onCancel,
      fileList,
      principalDepartmentId,
      data,
      activeName,
      handleClick,
      tableData,
      multipleSelection,
      Search,
      onSubmit,
      // ruleForm,
      // ruleFormRef,
      resetForm,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      rules,
      addRef,
      userRef,
      titles,
      disabled,
      emit,
      onSubmit,
      openUser,
      onAddEmergencyPersonnel,
      toggleFullscreen,
      FullScreen,
      full,
      ...toRefs(state),
      onUser,
      // listQuery,
      onMyAdd,
      // listApi,
      onEdit,
      onRowDel,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
</style>


 src/views/contingencyManagement/contingency/index.vue

@@ -2,12 +2,12 @@
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input size="default" v-model="formInline.searchParams.teamName" placeholder="队伍名称"> </el-input>
            <el-input size="default" v-model="listQuery.searchParams.teamName" placeholder="队伍名称"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="default" v-model="formInline.searchParams.teamType" placeholder="请选择队伍级别">
            <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>
@@ -17,7 +17,7 @@
             <el-button size="default" type="primary" class="ml10" @click="onSubmit">
               查询
             </el-button>
             <el-button size="default" class="ml10">
             <el-button size="default" class="ml10"  @click="submitReset">
               重置
             </el-button>
          </el-form-item>
@@ -25,17 +25,17 @@
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建','')">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
          <el-button size="default" type="warning" plain :disabled="warning">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain disabled>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
@@ -60,9 +60,10 @@
        </div>
      </div>
      <el-table
          :data="tableData.data"
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
@@ -75,17 +76,17 @@
        <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="onOpenAdd('查看',scope.row)">
            <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="onOpenAdd('修改',scope.row)">
            <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)">
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
@@ -95,29 +96,29 @@
      </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:current-page="formInline.pageIndex"
            v-model:currentPage="pageIndex"
            background
            v-model:page-size="formInline.pageSize"
            v-model:page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <OpenAdd ref="addRef"  @refreshRoleList="initTableData"/>
    <OpenSee ref="seeRef" @refreshRoleList="initTableData"/>
    <OpenAdd ref="addRef"  @myAdd="onMyAdd" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  toRefs,
  // toRefs,
  reactive,
  onMounted,
  ref,
@@ -126,7 +127,6 @@
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
@@ -137,43 +137,17 @@
  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 UpData from '/@/views/contingencyManagement/contingency/component/upData.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/contingency";


// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDesc: string
  principalPhone: string
  telephone: string;
  describe: string;
  responsibleDepartment: string
  teamLeader: string

}

// 定义接口来定义对象的类型
interface TableDataRow {

}

//
interface TableDataState {
  tableData: {
    data: Array<TableDataRow>;
    total: number;
    loading: boolean;
  };
}
export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    View,
    EditPen,
    Plus,
@@ -186,123 +160,185 @@
    contingencyApi
  },
  setup() {
    // 定义表单搜索
    const formInline = reactive({
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
      teamName: "",
      teamType: "",
    }
        teamName: "",
        teamType: "",
      }
    })
    // 搜索按钮
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const onSubmit = async () => {
      let res = await contingencyApi().getTeamManagementList(formInline)
      let res = await contingencyApi().getTeamManagementList(listQuery)
      if(res.data.code === '200'){
        state.tableData.data = res.data.data;
        state.tableData.total = state.tableData.data.length;
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      }else{
        ElMessage({
          type:'warning',
          showClose: true,
          type:'error',
          message:res.data.msg
        })
      }
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    // 重置
    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.toString();
      console.log(deleteAll.value);
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };

    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    // 定义表格数据
    const state = reactive<TableDataState>({
      tableData: {
        data: [],
        total: 0,
        loading: false,
      },
    })
    // 初始化表格数据
    const initTableData = async () => {
      let res = await contingencyApi().getTeamManagementList(formInline)
      if(res.data.code === '200'){
        state.tableData.data = res.data.data;
        state.tableData.total = state.tableData.data.length;
      }else{
        ElMessage({
          type:'warning',
          message:res.data.msg
        })
      }
    };
    //查看用户弹窗
    const seeRef = ref();
    const onOpenSee = (type: string, value: any) => {
      seeRef.value.openDialog(type, value);
    };
    // 打开新增应急队伍弹窗
    const addRef = ref();
    const onOpenAdd = (type: string, value: any) => {
      addRef.value.openDialog(type, value);
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急队伍管理',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    // 打开修改应急队伍弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急队伍管理',row,true);
      } else {
        addRef.value.openDialog('修改应急队伍管理',row,false);
      }
    };
    // 删除用户
    const onRowDel = (row: any) => {
      ElMessageBox.confirm(`此操作将永久删除队伍名称：“${row}”，是否继续?`, '提示', {
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(async () => {
            let res = await contingencyApi().deleteEmergencyTeam({principalUid:row.principalUid})
            if(res.data.code ==='200'){
      }).then(() => {
        contingencyApi()
          .deleteEmergencyTeam(data)
          .then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                type:'success',
                duration:2000,
                message:'删除成功'
              })
              await initTableData()
            }else{
                showClose: true,
                message: res.data.msg,
                type: 'success',
              });
              onSubmit();
            } else {
              ElMessage({
                type:'warning',
                message:res.data.msg
              })
                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) => {
      formInline.pageSize = val;
      listQuery.pageSize = val;
      onSubmit();
    };
    const onHandleCurrentChange = (val: number) => {
      formInline.pageIndex = val;
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
      onSubmit();
    });
    return {
      // value,
      // options,
      formInline,
      listQuery,
      onSubmit,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      // tableData,
      initTableData,
      onOpenSee, //查看
      seeRef,
      onOpenAdd,  //新增
      addRef,
      pageIndex,
      pageSize,
      total,
      onEdit,
      handleSelectionChange,
      submitReset,
      onRowDel,
      onMyAdd,
      tableData,
      onDeleteAll,
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state),
      deleteAll,
      warning,
      danger,
    };
  },
});

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

@@ -5,7 +5,7 @@
        <el-tab-pane label="待评价" name="first">
          <div class="button_Line">
            <div class="button_Left">
              <el-button size="default" type="danger" plain disabled>
              <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
                <el-icon>
                  <Delete />
                </el-icon>删除
@@ -33,6 +33,7 @@
              :data="tableData"
              style="width: 100%"
              ref="multipleTableRef"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                type="selection"
@@ -55,12 +56,12 @@
                <el-button size="small" text type="primary" @click="onFlowChart(scope.row)">
                  审批进度
                </el-button>
                <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)">
                <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="onRectificationDialog(scope.row)">
                <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
                  <el-icon style="margin-right: 5px;">
                    <EditPen />
                  </el-icon>整改
@@ -73,15 +74,13 @@
          </el-table>
          <div class="pages">
            <el-pagination
                v-if="tableData.length == 0 ? false : true"
                v-model:currentPage="pageIndex"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :pager-count="5"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="40"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
@@ -90,7 +89,7 @@
        <el-tab-pane label="已评价" name="second">Config</el-tab-pane>
      </el-tabs>
    </el-card>
    <ApprovalProgress ref="approvalRef" />
<!--    <ApprovalProgress ref="approvalRef" />-->
    <FlowChart ref="flowRef" />
    <RectificationDialog ref="rectificationRef" />
    <OpenEdit ref="editRef" />
@@ -101,13 +100,15 @@
<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElTable,
  ElMessage,
  ElMessageBox,
  TabsPaneContext,
} from 'element-plus';
import {
@@ -118,23 +119,12 @@
  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 ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue';
import {emergencyDrillEvaluationApi} from '/@/api/emergencyDrillEvaluation'

// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  teamPhone: string
  phone: string;
  describe: string;
  responsibleDepartment: string
  teamLeader: string

}

// 定义接口来定义对象的类型
interface TableDataRow {
@@ -150,7 +140,6 @@
  // // describe: string;
  // createTime: string;
}

export default defineComponent({
  name: 'systemUser',
  components: {
@@ -161,129 +150,164 @@
    Download,
    Refresh,
    UpData,
    ApprovalProgress,
    // ApprovalProgress,
    RectificationDialog,
    FlowChart
  },
  setup() {

    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
      },
    });
    // 定义表格数据
    const tableData = ref([]);

    // 列表数据请求
    const listApi = async () => {
      let res = await emergencyDrillEvaluationApi().getEmergencyDrillEvaluationList(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 tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      }
    ]

    // 审批进度弹窗
    const flowRef = ref();
    const onFlowChart = (row: TableDataRow) => {
      flowRef.value.openDialog(row);
    };
    // 打开修改用户弹窗
    const editRef = ref();
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    // // 查看整改弹窗
    // const editRef = ref();
    // const onOpenEdit = () => {
    //   editRef.value.openDialog('演练实施评价',false);
    // };
    // 打开修改弹窗
    const rectificationRef = ref();
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        rectificationRef.value.openDialog('查看演练实施评价',row,true);
      } else {
        rectificationRef.value.openDialog('修改演练实施评价',row,false);
      }
    };
    // 审批进度弹窗
    const approvalRef = ref();
    const onApprovalProgress = () => {
      approvalRef.value.openDialog();
    };
    // const approvalRef = ref();
    // const onApprovalProgress = () => {
    //   approvalRef.value.openDialog();
    // };
    // 整改弹窗
    const rectificationRef = ref();
    const onRectificationDialog = () => {
      rectificationRef.value.openDialog();
    // 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(4);
    const pageSize = ref(10);
    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 danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      // console.log(deletAll.value);
      if (val.length == 1) {
        danger.value = false;
      }  else if (val.length == 0) {
        danger.value = true;
      } else {
        danger.value = false;
      }
    };
    onMounted(() => {
      listApi();
    });
    return {
      activeName,
      handleClick,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenEdit,  //编辑
      // onOpenEdit,  //编辑
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      onApprovalProgress,
      approvalRef,
      onRectificationDialog,
      // onApprovalProgress,
      // approvalRef,
      onEdit,
      rectificationRef,
      onFlowChart,
      flowRef,
      onDeleteAll,
      handleSelectionChange,
    };
  },
});

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

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急演练实施"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,12 +13,13 @@
          :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="teamName">
            <el-form-item label="演练名称" prop="drillPlanId">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.drillPlanId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -29,9 +30,9 @@
            </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-form-item label="实际到场人员" prop="autualUser" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.autualUser"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -42,9 +43,9 @@
            </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-form-item label="演练过程描述" prop="processDesc">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.processDesc"
                  placeholder="请填写演练目的"
                  class="textarea"
                  type="textarea"
@@ -52,9 +53,9 @@
            </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-form-item label="演练记录人" prop="recordUserUid" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.recordUserUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -65,12 +66,13 @@
            </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-form-item label="演练记录时间" prop="drillRecordDate">
              <el-date-picker
                  class="w100"
                  v-model="value1"
                  v-model="ruleForm.drillRecordDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
@@ -78,8 +80,8 @@
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
@@ -91,7 +93,7 @@

<script lang="ts">
import {
  reactive,
  // reactive,
  ref,
  defineComponent
} from 'vue';
@@ -100,7 +102,7 @@
  FormInstance,
  // FormRules,
} from 'element-plus'

import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
@@ -108,6 +110,7 @@
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import UserSelect from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue'
import RegionsDialog from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue'
import {emergencyDrillExecuteApi} from "/@/api/emergencyDrillExecute";

export default defineComponent({
  name: 'openAdd',
@@ -116,44 +119,127 @@
    UserCheckbox,
    RegionsDialog,
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    const ruleForm = ref ({
      drillRecordDate: '', // 演练记录时间
      drillPlanId: '', //演练计划ID
      recordUserUid: '', // 记录人ID
      processDesc: '', // 演练过程描述
      userList: [
        {
          userUid: '',
        },
        {
          userUid: '',
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急演练实施' || title == '修改应急演练实施') {
        emergencyDrillExecuteApi()
            .seeEmergencyDrillExecute(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    const drillRecordDate = ref('')
    // 表单提交验证必填项
    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 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
          recordUserUid: '', // 记录人ID
          processDesc: '', // 演练过程描述
          userList: [
            {
              userUid: '',
            },
            {
              userUid: '',
            }
          ]
        };
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
@@ -180,12 +266,10 @@
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      drillRecordDate,
      daiInpt,
      Shows,
      ruleFormRef,
@@ -198,6 +282,10 @@
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
});

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

@@ -8,12 +8,7 @@
              <Plus />
            </el-icon>新建
          </el-button>
<!--          <el-button size="default" type="warning" plain disabled>-->
<!--            <el-icon>-->
<!--              <Edit />-->
<!--            </el-icon>修改-->
<!--          </el-button>-->
          <el-button size="default" type="danger" plain disabled>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
@@ -40,40 +35,33 @@
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          ref=""
          @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="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="演练记录时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillPlanId" 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="drillRecordDate" label="演练记录时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="planId" 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="onOpenAdd(scope.row)">
            <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onOpenAdd(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button size="small" text type="primary" @click="onOpenAdd(scope.row)">
            <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="onOpenAdd(scope.row)">
              发起审批
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
@@ -83,21 +71,20 @@
      </el-table>
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenAdd ref="addRef" />
    <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
    <upData ref="upShow"></upData>
  </div>
</template>
@@ -105,56 +92,29 @@
<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
  // ElTable,
} from 'element-plus';
import { Plus,
  // Edit,
  Delete,
  Upload,
  Download,
  View,
  Refresh,
  VideoPause,
  VideoPlay,
  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';

// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  teamPhone: string
  phone: string;
  describe: string;
  responsibleDepartment: string
  teamLeader: string

}

// 定义接口来定义对象的类型
interface TableDataRow {
  // userName: string;
  // userNickname: string;
  // roleSign: string;
  // department: string[];
  // phone: string;
  // email: string;
  // sex: string;
  // password: string;
  // overdueTime: Date;
  // // describe: string;
  // createTime: string;
}
import {emergencyDrillExecuteApi} from "/@/api/emergencyDrillExecute";

export default defineComponent({
  name: 'systemUser',
@@ -164,117 +124,161 @@
    Plus,
    // Edit,
    Delete,
    View,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    // 列表参数
    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 tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      }
    ]
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
      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 = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        emergencyDrillExecuteApi()
            .deleteEmergencyDrillExecute(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(() => {
            ElMessage.success('删除成功');
            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(4);
    const pageSize = ref(10);
    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 danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      // console.log(deletAll.value);
      if (val.length == 1) {
        danger.value = false;
      }  else if (val.length == 0) {
        danger.value = true;
      } else {
        danger.value = false;
      }
    };
    onMounted(() => {
      listApi();
    });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
@@ -285,6 +289,12 @@
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      onMyAdd,
      total,
      onDeleteAll,
      handleSelectionChange,
      danger,
      deletAll,
    };
  },
});

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

文件已删除

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

@@ -104,7 +104,7 @@
import {
  ElMessageBox,
  ElMessage,
  ElTable,
  // ElTable,
} from 'element-plus';
import {
  Plus,

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

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="查看应急预案启动记录"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -10,16 +10,16 @@
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :rules="rules"
          :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="teamName">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.planId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -33,7 +33,7 @@
            <el-form-item label="备注">
              <el-input
                  class="textarea"
                  v-model="ruleForm.describe"
                  v-model="ruleForm.remark"
                  type="textarea"
                  maxlength="150"
                  placeholder="请填写备注"
@@ -44,7 +44,8 @@
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" @click="onCancel">关闭</el-button>
                    <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>
@@ -56,14 +57,13 @@

<script lang="ts">
import {
  reactive,
  toRefs,
  ref,
  defineComponent
} from 'vue';
import type {
  FormInstance,
} from 'element-plus'
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
@@ -71,37 +71,7 @@
import UserSelections from "/@/components/userSelections/index.vue"
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.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
  jobNumber: string;
  personnelName: string;
  personnelGender: string;
  phone: string;
  position: string;
}
interface UserState {
  isShowDialog: boolean;
  ruleForm: RuleFormRow;
  deptData: Array<DeptData>;
}
import {emergencyPlanLogApi} from "/@/api/emergencyPlanLog";

export default defineComponent({
  name: 'openEdit',
@@ -110,44 +80,79 @@
    AddEmergencyPersonnel,
    EditEmergencyPersonnel
  },
  setup() {
    const state = reactive<UserState>({
      isShowDialog: false,
      ruleForm: {
        selectPeople:'111', //选择人员
        jobNumber: '', // 人员工号
        phone: '', // 手机号码
        personnelGender: '', //人员性别
        position: '', //职位
        personnelName: '', // 人员名称
      },
      deptData: [], // 部门数据
    });
  setup(props, { emit }) {
    const isShowDialog = ref(false);

    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // // 新增
    // const onSubmit = () => {
    //   closeDialog();
    // };
    const ruleFormRef = ref<FormInstance>();
    const ruleForm= ref({
      planId: '应急预案', //应急预案人员
      remark: '', // 备注
    })
    const titles = ref();
    const disabled = ref();

    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };

    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      state.ruleForm = row;
      state.isShowDialog = true;
    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);
@@ -160,16 +165,20 @@
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      Search,
      ruleFormRef,
      openUser,
      userRef,
      ...toRefs(state),
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
      ruleForm,
      submitForm,
      resetForm,
      isShowDialog,
    };
  },
});

 src/views/contingencyManagement/emergencyPlanStartRecord/index.vue

@@ -3,7 +3,6 @@
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form
            ref="ruleFormRef"
            size="default"
            label-width="80px"
            :inline="true"
@@ -19,7 +18,7 @@
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10" @click="listApi">
          <el-button size="default" type="primary" class="ml10" @click="onSubmit">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
@@ -29,12 +28,12 @@
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="warning" plain disabled>
          <el-button size="default" type="warning" plain :disabled="warning">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain disabled>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
@@ -56,24 +55,29 @@
      <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="应急预案" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="启动人"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="启动时间"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="materialClassification" label="备注" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="planId" label="应急预案" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="userId" 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 :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="OnOpenSee(scope.row)">
            <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="onRowDel(scope.row)">
            <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>删除
@@ -96,7 +100,7 @@
      </div>
    </el-card>
    <SelectEmergencyPlan ref="showRef"/>
    <OpenSee ref="editRef" />
    <OpenSee ref="editRef" @myAdd="onMyAdd" />
  </div>
</template>

@@ -111,11 +115,8 @@
import {
  ElMessageBox,
  ElMessage,
  ElTable,
  FormInstance,
} from 'element-plus';
import {
  Plus,
  Search,
  Delete,
  // Upload,
@@ -128,18 +129,7 @@
import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import SelectEmergencyPlan from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue'
import {emergencyPlanLogApi} from "/@/api/emergencyPlanLog";

// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  materialClassification: string
}

// 定义接口来定义对象的类型
interface TableDataRow {
}
import {contingencyApi} from "/@/api/contingency";

export default defineComponent({
  name: 'systemUser',
@@ -147,7 +137,6 @@
    OpenSee,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    SelectEmergencyPlan,
@@ -155,7 +144,6 @@
    Refresh,
  },
  setup() {
    const ruleFormRef = ref<FormInstance>()
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
@@ -164,18 +152,12 @@
        planId: '',
      },
    });
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    // 定义表格数据
    const tableData = ref([]);

    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    // 请求列表数据
    const listApi = async () => {
    const onSubmit = async () => {
      let res = await emergencyPlanLogApi().getEmergencyPlanLogList(listQuery);
      console.log(res);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
@@ -188,42 +170,46 @@
    //重置
    const submitReset = () => {
      listQuery.searchParams.planId = '';
      listApi();
      onSubmit();
    };
    const total = ref();
    const tableData = ref([]);
    // 定义表格数据
    // const tableData: User[] = [
    //   {
    //     teamName: '消防安全绳',
    //     teamLevel: 'YJWZ20210208104332',
    //     teamDescription: '安全管理部',
    //     materialClassification: '事故气体吸收装置',
    //   },
    //   {
    //     teamName: '消防安全绳',
    //     teamLevel: 'YJWZ20210208104332',
    //     teamDescription: '安全管理部',
    //     materialClassification: '事故气体吸收装置',
    //   },
    //   {
    //     teamName: '消防安全绳',
    //     teamLevel: 'YJWZ20210208104332',
    //     teamDescription: '安全管理部',
    //     materialClassification: '事故气体吸收装置',
    //   },
    //   {
    //     teamName: '消防安全绳',
    //     teamLevel: 'YJWZ20210208104332',
    //     teamDescription: '安全管理部',
    //     materialClassification: '事故气体吸收装置',
    //   }
    // ]

    // // 打开修改用户弹窗
    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.toString();
      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 OnOpenSee = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    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()
@@ -231,58 +217,111 @@
      showRef.value.openDailog()
    }
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
    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(() => {
            ElMessage.success('删除成功');
            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(4);
    const pageSize = ref(10);
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
      listQuery.pageSize = val;
      onSubmit();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    onMounted(() => {
      listApi();
      onSubmit();
    });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      OnOpenSee,  //编辑
      editRef,
      onMyAdd,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      ruleFormRef,
      listApi,
      onSubmit,
      Search,
      daiInpt,
      showRef,
      total,
      onMounted,
      submitReset,
      listQuery,
      Edit,
      View,
      // ...toRefs(state),
      onEdit,
      onDeleteAll,
      deleteAll,
      warning,
      danger,
      handleSelectionChange,
    };
  },
});

 src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue

@@ -1,22 +1,25 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急物资保养"
        :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="teamName">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.suppliesId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -27,17 +30,17 @@
            </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-form-item label="检查结果" prop="inspectResult">
              <el-select v-model="ruleForm.inspectResult" 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="telephone">
            <el-form-item label="创建人" prop="userUid">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -48,11 +51,12 @@
            </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-form-item label="创建时间" prop="inspectTime">
              <el-date-picker
                  class="w100"
                  v-model="value1"
                  v-model="ruleForm.inspectTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择日期时间"
              />
            </el-form-item>
@@ -61,8 +65,8 @@
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
@@ -73,7 +77,6 @@

<script lang="ts">
import {
  reactive,
  ref,
  defineComponent
} from 'vue';
@@ -82,12 +85,15 @@
  FormInstance,
  // FormRules,
} from 'element-plus'

import { ElMessage } from 'element-plus';
import {
  Search
  Search,
  FullScreen,
} from '@element-plus/icons-vue'
import Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection";
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";

export default defineComponent({
  name: 'openAdd',
@@ -95,44 +101,125 @@
    UserSelections,
    Material,
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      inspectResult: '', //检查结果
      inspectTime: '', // 创建时间
      userList:[
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急物资检查' || title == '修改应急物资检查') {
        emergencyMaterialsInspectionApi()
            .seeEmergencyMaterialsInspection(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    // 表单提交验证必填项
    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 submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急物资检查') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            maintenanceEmergencyMaterialsApi()
                .addMaintenanceEmergencyMaterials(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;
            maintenanceEmergencyMaterialsApi()
                .editMaintenanceEmergencyMaterials(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 = {
          suppliesId: '', // 物资ID
          inspectResult: '', //检查结果
          inspectTime: '', // 创建时间
          userList:[
            {
              userUid: ''
            },
            {
              userUid: ''
            }
          ]
        }
      })
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
@@ -143,11 +230,18 @@
    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,
      Search,
      ruleForm,
      value1,
@@ -157,6 +251,13 @@
      submitForm,
      openUser,
      userRef,
      resetForm,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
    };
  },
});

 src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue

@@ -3,15 +3,13 @@
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="ruleForm.teamLeader"
                v-model="listQuery.searchParams.suppliesId"
                placeholder="请选择应急物资"
                class="input-with-select"
            >
@@ -20,7 +18,7 @@
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10">
          <el-button size="default" type="primary" class="ml10" @click="onSubmit">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
@@ -35,12 +33,12 @@
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
          <el-button size="default" type="warning" plain :disabled="warning">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain disabled>
          <el-button size="default" type="danger" plain @click="onDeleteAll" :disabled="danger">
            <el-icon>
              <Delete />
            </el-icon>删除
@@ -63,22 +61,28 @@
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="保养结果"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="保养日期"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="suppliesId" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="inspectResult" label="维修结果"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="inspectTime" 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="OnOpenSee(scope.row)">
            <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="onRowDel(scope.row)">
            <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>删除
@@ -88,24 +92,21 @@
      </el-table>
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <EmergencySupplies ref="showRef"/>
    <OpenSee ref="editRef" />
    <upData ref="upShow"></upData>
    <OpenAdd ref="addRef" />
    <OpenAdd ref="addRef" @myAdd="onMyAdd" />
  </div>
</template>

@@ -113,15 +114,14 @@
import {
  // toRefs,
  reactive,
  // onMounted,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
  FormInstance,
  // ElTable,
} from 'element-plus';
import {
  Plus,
@@ -133,25 +133,14 @@
  View,
  EditPen,
} from '@element-plus/icons-vue'
import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue';
// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
}

// 定义接口来定义对象的类型
interface TableDataRow {
}
import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection";

export default defineComponent({
  name: 'index',
  components: {
    OpenSee,
    View,
    OpenAdd,
    EditPen,
@@ -164,113 +153,195 @@
    UpData
  },
  setup() {
    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    const listQuery = reactive ({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        suppliesId: '',
      },
    });

    const editRef = ref();
    // 定义表格数据
    const tableData = ref([]);
    // 搜索按钮
    const onSubmit = async () => {
      let res = await emergencyMaterialsInspectionApi().getEmergencyMaterialsInspectionList(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 submitReset = () => {
      listQuery.searchParams.suppliesId = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      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();
      addRef.value.openDialog('新建应急物资检查',false);
    };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 新增后刷新
    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(() => {
            emergencyMaterialsInspectionApi()
                .deleteEmergencyMaterialsInspection(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(() => {
            emergencyMaterialsInspectionApi()
                .deleteEmergencyMaterialsInspection(deletAll.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 upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部'
      },
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      }
    ]
    // // 打开新增用户弹窗
    // const addRef = ref();
    // const onOpenAdd = () => {
    //   addRef.value.openDialog();
    // };
    // // 打开修改用户弹窗
    const OnOpenSee = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };

    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
      listQuery.pageSize = val;
      onSubmit();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 页面加载时
    onMounted(() => {
      onSubmit();
    });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      OnOpenSee,  //编辑
      editRef,
      Edit,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      ruleFormRef,
      ruleForm,
      Search,
      daiInpt,
      showRef,
      onOpenAdd,  //新增
      addRef,
      onSubmit,
      View,
      submitReset,
      tableData,
      onMyAdd,
      onEdit,
      onDeleteAll,
      handleSelectionChange,
      listQuery,
      warning,
      danger,
      total,
    };
  },
});

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/inspect.vue

对比新文件
@@ -0,0 +1,228 @@
<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"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.suppliesId"
                  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="maintainResult">
              <el-select v-model="ruleForm.maintainResult" 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="userUid">
              <el-input
                  v-model="ruleForm.userUid"
                  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="maintainTime">
              <el-date-picker
                  class="w100"
                  v-model="ruleForm.maintainTime"
                  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" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <Material ref="showRef"/>
    <userSelections ref="userRef"/>
  </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 Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection";

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      maintainResult: '', //保养结果
      maintainTime: '', // 创建时间
      userList: [
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string,) => {
      isShowDialog.value = true;
      titles.value = title;
    };
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '修改应急物资检查') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyMaterialsInspectionApi()
                .addEmergencyMaterialsInspection(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);
          }
        });
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };

    //日期选择器
    const value1 = ref('')

    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.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,
      isShowDialog,
      resetForm,
      Search,
      ruleForm,
      value1,
      daiInpt,
      showRef,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
</style>

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急物资保养"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -16,9 +16,9 @@
      >
        <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-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.suppliesId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -29,17 +29,17 @@
            </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-form-item label="保养结果" prop="maintainResult">
              <el-select v-model="ruleForm.maintainResult" 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="telephone">
            <el-form-item label="创建人" prop="userUid">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -50,12 +50,13 @@
            </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-form-item label="创建时间" prop="maintainTime">
              <el-date-picker
                  class="w100"
                  v-model="value1"
                  v-model="ruleForm.maintainTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
@@ -63,8 +64,8 @@
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
@@ -75,67 +76,95 @@

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

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

import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      maintainResult: '', //保养结果
      maintainTime: '', // 创建时间
      userList: [
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string,) => {
      isShowDialog.value = true;
      titles.value = title;
    };
    // 关闭弹窗
    const closeDialog = () => {
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '修改应急物资保养') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            maintenanceEmergencyMaterialsApi()
                .addMaintenanceEmergencyMaterials(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);
          }
        });
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };

    //日期选择器
    const value1 = ref('')
    // 表单提交验证必填项
    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 showRef=ref()
    const daiInpt=()=>{
@@ -157,9 +186,8 @@
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      resetForm,
      Search,
      ruleForm,
      value1,
@@ -172,6 +200,9 @@
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
    };
  },
});

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue

@@ -1,8 +1,21 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog title="新建应急物资代码" v-model="isShowDialog" width="50%" draggable :fullscreen="full">
        <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="50%"
        draggable
        :fullscreen="full"
    >
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" size="default" label-width="120px">
            <el-form
          ref="ruleFormRef"
          :rules="rules"
          :model="ruleForm"
          size="default"
          label-width="120px"
          :disabled="disabled"
      >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物资名称" prop="name">
@@ -41,12 +54,12 @@
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物资分类" prop="classification">
                            <el-select v-model="ruleForm.classification" 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-option label="防护器材" value="common"></el-option>
                                <el-option label="其它" value="common"></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-option label="防护器材" value="防护器材"></el-option>
                                <el-option label="其它" value="其它"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
@@ -62,7 +75,13 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="生产日期" prop="productionDate">
                            <el-date-picker v-model="ruleForm.productionDate" type="datetime" class="w100" placeholder="选择日期时间" />
                            <el-date-picker
                  v-model="ruleForm.productionDate"
                  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">
@@ -73,19 +92,30 @@
                    <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" class="w100" placeholder="请选择">
                                <el-option label="完好" value="admin"></el-option>
                                <el-option label="维修" value="common"></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="inspectPeiod">
                            <el-input v-model.number="ruleForm.inspectPeiod" type="" maxlength="4" placeholder="请填写使用期限"></el-input>
                            <el-input
                  v-model.number="ruleForm.inspectPeiod"
                  type=""
                  maxlength="4"
                  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="useDate">
                            <el-date-picker v-model="ruleForm.useDate" type="datetime" class="w100" placeholder="选择日期时间" />
                            <el-date-picker
                  v-model="ruleForm.useDate"
                  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">
@@ -95,24 +125,36 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="检查日期" prop="inspectDate">
                            <el-date-picker v-model="ruleForm.inspectDate" type="datetime" class="w100" placeholder="选择日期时间" />
                            <el-date-picker
                  v-model="ruleForm.inspectDate"
                  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="nextInspectDate">
                            <el-date-picker v-model="ruleForm.nextInspectDate" type="datetime" class="w100" placeholder="选择日期时间" />
                            <el-date-picker
                  v-model="ruleForm.nextInspectDate"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  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="经度（度）">
                            <el-input v-model="ruleForm.longitude" 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.latitude" 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.longitude" 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.latitude" 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.principalUserUid" placeholder="请选择" class="input-with-select">
@@ -126,8 +168,8 @@
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
@@ -141,34 +183,14 @@
import { reactive, ref, defineComponent } from 'vue';

import type { 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 PersonInCharge from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue';
import RegionsCheckbox from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue';
import { emergencyResourcesApi } from '/@/api/emergencyResources';
interface From {
    productionDate: string;
    useDate: string;
    inspectDate: string;
    nextInspectDate: string;
    inspectPeiod: number | null;
    count: number | null;
    usePeriod: number | null;
    departmentId: number | null;
    principalUserUid: number | null;
    status: string;
    classification: string;
    name: string;
    number: string;
    model: string;
    longitude: string;
    latitude: string;
    use: string;
    areaId: number | null;
    place: string;
    useExplain: string;
}
import {emergencySuppliesApi} from "/@/api/emergencyResources";

export default defineComponent({
    name: 'openAdd',
    components: {
@@ -176,21 +198,21 @@
        UserSelections,
        RegionsCheckbox,
    },
    setup() {
    setup(props, { emit }) {
        const isShowDialog = ref(false);

        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = reactive<From>({
        const ruleForm = ref ({
            productionDate: '',
            useDate: '',
            inspectDate: '',
            nextInspectDate: '',
            inspectPeiod: null,
            count: null,
            usePeriod: null,
            departmentId: null,
            principalUserUid: null,
            inspectPeiod: '',
            count: '',
            usePeriod: '',
            departmentId: '',
            principalUserUid: '',
            status: '',
            classification: '',
            name: '',
@@ -203,17 +225,22 @@
            place: '',
            useExplain: '',
        });
    const titles = ref();
    const disabled = ref();
        // 打开弹窗
        const openDialog = () => {
            // state.ruleForm = row;
            isShowDialog.value = true;
        };

        // 取消
        const onCancel = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急物资代码' || title == '修改应急物资代码') {
        emergencySuppliesApi()
            .seeEmergencySupplies(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
        };
        //日期选择器
        const value1 = ref('');
@@ -225,11 +252,11 @@
                label: 'Level one 1',
                children: [
                    {
                        value: '1-1',
                        value: '11',
                        label: 'Level two 1-1',
                        children: [
                            {
                                value: '1-1-1',
                                value: '111',
                                label: 'Level three 1-1-1',
                            },
                        ],
@@ -241,21 +268,21 @@
                label: 'Level one 2',
                children: [
                    {
                        value: '2-1',
                        value: '21',
                        label: 'Level two 2-1',
                        children: [
                            {
                                value: '2-1-1',
                                value: '211',
                                label: 'Level three 2-1-1',
                            },
                        ],
                    },
                    {
                        value: '2-2',
                        value: '22',
                        label: 'Level two 2-2',
                        children: [
                            {
                                value: '2-2-1',
                                value: '221',
                                label: 'Level three 2-2-1',
                            },
                        ],
@@ -267,21 +294,21 @@
                label: 'Level one 3',
                children: [
                    {
                        value: '3-1',
                        value: '31',
                        label: 'Level two 3-1',
                        children: [
                            {
                                value: '3-1-1',
                                value: '311',
                                label: 'Level three 3-1-1',
                            },
                        ],
                    },
                    {
                        value: '3-2',
                        value: '32',
                        label: 'Level two 3-2',
                        children: [
                            {
                                value: '3-2-1',
                                value: '321',
                                label: 'Level three 3-2-1',
                            },
                        ],
@@ -308,12 +335,12 @@
                label: '生产运行部',
                children: [
                    {
                        value: '2-1',
                        value: '21',
                        label: '灌装一班',
                        children: [],
                    },
                    {
                        value: '2-2',
                        value: '22',
                        label: '工艺四班',
                        children: [],
                    },
@@ -324,12 +351,12 @@
                label: '设备部',
                children: [
                    {
                        value: '3-1',
                        value: '31',
                        label: '仪表班',
                        children: [],
                    },
                    {
                        value: '3-2',
                        value: '32',
                        label: '机修班',
                        children: [],
                    },
@@ -447,21 +474,97 @@
                },
            ],
        });
        // 表单提交验证必填项
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    emergencyResourcesApi()
                        .emergencySuppliesAdd(ruleForm)
                        .then((res) => {
                            console.log(res);
                        });
                } else {
                    console.log('error submit!', fields);
                }
            });
        };
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急物资代码') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencySuppliesApi()
                .addEmergencySupplies(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;
            emergencySuppliesApi()
                .editEmergencySupplies(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 = {
          productionDate: '',
          useDate: '',
          inspectDate: '',
          nextInspectDate: '',
          inspectPeiod: '',
          count: '',
          usePeriod: '',
          departmentId: '',
          principalUserUid: '',
          status: '',
          classification: '',
          name: '',
          number: '',
          model: '',
          longitude: '',
          latitude: '',
          use: '',
          areaId: null,
          place: '',
          useExplain: '',
        }
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
        // 应急队伍弹窗
        const Shows = ref();
        const daiInpt = () => {
@@ -489,7 +592,6 @@
        return {
            openDialog,
            isShowDialog,
            onCancel,
            responsibleDepartment,
            data,
            Search,
@@ -509,6 +611,10 @@
            toggleFullscreen,
            FullScreen,
            full,
      resetForm,
      titles,
      disabled,
      emit,
        };
    },
});

 src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue

@@ -8,30 +8,30 @@
            </div>
            <div class="button_Line">
                <div class="button_Left">
                    <el-button size="default" type="primary" @click="onOpenAdd('新建')">
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon> <Plus /> </el-icon>新建
                    </el-button>
                    <el-button size="default" type="warning" plain disabled>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon> <Edit /> </el-icon>修改
                    </el-button>
                    <el-button size="default" type="danger" plain disabled>
                    <el-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>
                            <Refresh />
                        </el-icon>
                    </el-button>
<!--          <el-button @click="upButton">-->
<!--                        <el-icon>-->
<!--                            <Upload />-->
<!--                        </el-icon>-->
<!--                    </el-button>-->
<!--                    <el-button>-->
<!--                        <el-icon>-->
<!--                            <Refresh />-->
<!--                        </el-icon>-->
<!--                    </el-button>-->
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef">
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="number" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column>
@@ -41,22 +41,22 @@
                <el-table-column prop="count" 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="onMaintain(scope.row)">
                        <el-button size="small" text type="primary" @click="onMaintain()">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>保养
                        </el-button>
                        <el-button size="small" text type="primary" @click="onMaintain(scope.row)">
                        <el-button size="small" text type="primary" @click="onInspect()">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>检查
                        </el-button>
                        <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                        <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
                            <el-icon style="margin-right: 5px"> <View /> </el-icon>查看
                        </el-button>
                        <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                        <el-button size="small" text type="primary" @click="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)">
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
                            <el-icon> <Delete /> </el-icon>删除
                        </el-button>
                    </template>
@@ -69,8 +69,6 @@
                    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"
@@ -78,71 +76,46 @@
                />
            </div>
        </el-card>
        <Maintain ref="seeRef" />
        <OpenAdd ref="addRef" />
        <OpenEdit ref="editRef" />
        <upData ref="upShow"></upData>
        <Maintain ref="seeRef" @myadd="onMaintainAdd"/>
    <Inspect ref="spectRef" @myadd="onInspectAdd"/>
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
<!--        <upData ref="upShow"></upData>-->
    </div>
</template>

<script lang="ts">
import {
    // toRefs,
    // reactive,
    // onMounted,
    ref,
    defineComponent,
    reactive,
    onMounted,
} from 'vue';
import { ElMessageBox, ElMessage, ElTable } from 'element-plus';
import {
  ElMessageBox,
  ElMessage,
  // ElTable
} from 'element-plus';
import {
    Plus,
    Edit,
    Delete,
    Upload,
    // Download,
    Refresh,
    View,
    EditPen,
} from '@element-plus/icons-vue';
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue';
import Maintain from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue';
import Inspect from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/inspect.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import { emergencyResourcesApi } from '/@/api/emergencyResources';
// 定义表格数据类型
interface User {
    id: number;
    name: string;
    number: string;
    departmentId: number;
    classification: string;
    place: string;
    count: number;
}

// 定义接口来定义对象的类型
interface TableDataRow {
    // userName: string;
    // userNickname: string;
    // roleSign: string;
    // department: string[];
    // phone: string;
    // email: string;
    // sex: string;
    // password: string;
    // overdueTime: Date;
    // // describe: string;
    // createTime: string;
}
import {emergencySuppliesApi} from '/@/api/emergencyResources';

export default defineComponent({
    name: 'systemUser',
    components: {
        OpenAdd,
        Maintain,
        OpenEdit,
        // OpenEdit,
        View,
        EditPen,
        Plus,
@@ -150,12 +123,13 @@
        Delete,
        Upload,
        // Download,
    Inspect,
        Refresh,
        UpData,
    },
    setup() {
        const multipleTableRef = ref<InstanceType<typeof ElTable>>();
        const multipleSelection = ref<User[]>([]);
        // const multipleTableRef = ref<InstanceType<typeof ElTable>>();
        // const multipleSelection = ref<User[]>([]);
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
@@ -168,8 +142,8 @@
        const tableData = ref([]);
        // 请求列表数据
        const listApi = async () => {
            let res = await emergencyResourcesApi().emergencySuppliesList(listQuery);
            console.log(res);
            let res = await emergencySuppliesApi().getEmergencySuppliesList(listQuery);
            // console.log(res);
            if (res.data.code == 200) {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
@@ -184,42 +158,145 @@
            listQuery.searchParams.name = '';
            listApi();
        };
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      // console.log(deletAll.value);
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
    // 页面加载时
        onMounted(() => {
            listApi();
        });
        // 上传
        const upShow = ref();
        const upButton = () => {
            upShow.value.openDialog();
        };
        // const upShow = ref();
        // const upButton = () => {
        //     upShow.value.openDialog();
        // };

        //查看用户弹窗
        //新增应急物资检查弹窗
        const seeRef = ref();
        const onMaintain = (row: TableDataRow) => {
            seeRef.value.openDialog(row);
        const onMaintain = () => {
      seeRef.value.openDialog('修改应急物资保养',false);
        };
        // 打开新增用户弹窗
    // 应急物资保养新增后刷新
    const onMaintainAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    //修改应急物资检查弹窗
    const spectRef = ref();
    const onInspect = () => {
      spectRef.value.openDialog('修改应急物资检查',false);
    };
    // 应急物资检查新增后刷新
    const onInspectAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
        // 新建应急物资代码弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog();
            addRef.value.openDialog('新建应急物资代码',false);
        };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
        // 打开修改用户弹窗
        const editRef = ref();
        const onOpenEdit = (row: TableDataRow) => {
            editRef.value.openDialog(row);
        };
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急物资代码',row,true);
      } else {
        addRef.value.openDialog('修改应急物资代码',row,false);
      }
    };
        // 删除用户
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        const onRowDel = (data: any) => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => {});
          .then(() => {
            emergencySuppliesApi()
              .deleteEmergencySupplies(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(() => {
            emergencySuppliesApi()
                .deleteEmergencySupplies(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();
@@ -235,15 +312,13 @@
            listQuery.pageIndex = val;
        };
        return {
            multipleSelection,
            multipleTableRef,
            upButton,
            upShow,
            // multipleSelection,
            // multipleTableRef,
            // upButton,
            // upShow,
            tableData,
            onMaintain, //保养
            seeRef,
            onOpenEdit, //编辑
            editRef,
            onOpenAdd, //新增
            addRef,
            onRowDel,
@@ -256,7 +331,16 @@
            listApi,
            onMounted,
            submitReset,
            // ...toRefs(state),
      onMyAdd,
      onEdit,
      onDeleteAll,
      handleSelectionChange,
      warning,
      danger,
      spectRef,
      onInspect,
      onMaintainAdd,
      onInspectAdd,
        };
    },
});

 src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急物资保养"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,12 +13,13 @@
          :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="teamName">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.suppliesId"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -29,17 +30,17 @@
            </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-form-item label="保养结果" prop="maintainResult">
              <el-select v-model="ruleForm.maintainResult" 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="telephone">
            <el-form-item label="创建人" prop="userUid">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -50,11 +51,12 @@
            </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-form-item label="创建时间" prop="maintainTime">
              <el-date-picker
                  class="w100"
                  v-model="value1"
                  v-model="ruleForm.maintainTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择日期时间"
              />
            </el-form-item>
@@ -63,8 +65,8 @@
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
@@ -75,7 +77,6 @@

<script lang="ts">
import {
  reactive,
  ref,
  defineComponent
} from 'vue';
@@ -84,13 +85,14 @@
  FormInstance,
  // FormRules,
} from 'element-plus'

import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";

export default defineComponent({
  name: 'openAdd',
@@ -98,44 +100,125 @@
    UserSelections,
    Material,
  },
  setup() {
  setup(props, { emit }) {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      maintainResult: '', //保养结果
      maintainTime: '', // 创建时间
      userList: [
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急物资保养' || title == '修改应急物资保养') {
        maintenanceEmergencyMaterialsApi()
            .seeMaintenanceEmergencyMaterials(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    const maintainTime = ref('')
    // 表单提交验证必填项
    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 submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急物资保养') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            maintenanceEmergencyMaterialsApi()
                .addMaintenanceEmergencyMaterials(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;
            maintenanceEmergencyMaterialsApi()
                .editMaintenanceEmergencyMaterials(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 = {
          suppliesId: '', // 队伍名称
          maintainResult: '', //队伍负责人
          maintainTime: '', // 负责人部门
          userList: [
            {
              userUid: ''
            },
            {
              userUid: ''
            }
          ]
        }
      })
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
@@ -157,12 +240,10 @@
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      maintainTime,
      daiInpt,
      showRef,
      ruleFormRef,
@@ -172,6 +253,10 @@
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
});

 src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue

@@ -1,346 +1,396 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="ruleForm.teamLeader"
                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">
            查询
          </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>
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain disabled>
            <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%"
          ref="multipleTableRef"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="保养结果"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" 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="OnOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
    <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.suppliesId" 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="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>
                        <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="suppliesId" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="maintainResult" label="保养结果" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="maintainTime" 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)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </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"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <EmergencySupplies ref="showRef"/>
    <OpenSee ref="editRef" />
    <upData ref="upShow"></upData>
    <OpenAdd ref="addRef" />
  </div>
                        <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>
        <EmergencySupplies ref="showRef" />
        <OpenSee ref="editRef"/>
        <upData ref="upShow"></upData>
        <OpenAdd ref="addRef"  @myAdd="onMyAdd" />
    </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  // onMounted,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
  FormInstance,
    ElMessageBox,
    ElMessage,
    // ElTable,
    // FormInstance,
} from 'element-plus';
import {
  Plus,
  Search,
  Delete,
  Edit,
  Download,
  Refresh,
  View,
  EditPen,
} from '@element-plus/icons-vue'
import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue';
// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
}
import { Plus, Search, Delete, Edit, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
// import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
// import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
// import EmergencySupplies from '/@/components/emergencySupplies/index.vue';
// import OpenAdd from '/@/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue';
// import { contingencyApi } from '/@/api/contingency';
// import { emergencySuppliesMaintainApi } from '/@/api/emergencySuppliesMaintain';

// 定义接口来定义对象的类型
interface TableDataRow {
}
import OpenSee from '../../emergencyPlanStartRecord/component/openSee.vue'
import UpData from '../../panManagement/component/upData.vue'
import EmergencySupplies from '../../../../components/emergencySupplies/index.vue'
import OpenAdd from '../maintenanceOfEmergencyMaterials/component/openAdd.vue'
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenSee,
    View,
    OpenAdd,
    EditPen,
    Plus,
    Edit,
    Delete,
    EmergencySupplies,
    Download,
    Refresh,
    UpData
  },
  setup() {
    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    });

    const editRef = ref();
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    name: 'systemUser',
    components: {
        OpenSee,
        View,
        OpenAdd,
        EditPen,
        Plus,
        Edit,
        Delete,
        EmergencySupplies,
        Download,
        Refresh,
        UpData,
    },
    setup() {
        //定义表单
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                suppliesId: '',
            },
        });
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部'
      },
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
    const tableData = ref([]);
        // 请求列表数据
        const onSubmit = async () => {
      let res = await maintenanceEmergencyMaterialsApi().getMaintenanceEmergencyMaterialsList(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 addRef = ref();
    // const onOpenAdd = () => {
    //   addRef.value.openDialog();
    // };
    // // 打开修改用户弹窗
    const OnOpenSee = (row: TableDataRow) => {
      editRef.value.openDialog(row);
        };
    // 重置
    const submitReset = () => {
      listQuery.searchParams.suppliesId = '';
      onSubmit();
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      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) {
        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(() => {
            ElMessage.success('删除成功');
            maintenanceEmergencyMaterialsApi()
                .deleteMaintenanceEmergencyMaterials(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 pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            maintenanceEmergencyMaterialsApi()
                .deleteMaintenanceEmergencyMaterials(deletAll.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 handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
        // 上传
        const upShow = ref();
        const upButton = () => {
            upShow.value.openDialog();
        };
        // 应急物资弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        // 分页
    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();
        };
        // 页面加载时
        onMounted(() => {
      onSubmit();
        });
        return {
            upButton,
            upShow,
            Edit,
            onRowDel,
            handleSizeChange,
            handleCurrentChange,
            Search,
            daiInpt,
            showRef,
            onOpenAdd, //新增
            addRef,
            onSubmit,
      submitReset,
      onMyAdd,
      listQuery,
      warning,
      danger,
      tableData,
      OnOpenSee,  //编辑
      editRef,
      Edit,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      ruleFormRef,
      ruleForm,
      Search,
      daiInpt,
      showRef,
      onOpenAdd,  //新增
      addRef,
    };
  },
      total,
      handleSelectionChange,
      onDeleteAll,
      onEdit,
        };
    },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
.table_Box {
    padding: 20px;
    background-color: #fff;
}
.tableForm{
  margin-top: 10px;
.tableForm {
    margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
.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__footer {
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #e8e8e8;
    margin-right: 0;
    border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
    background-color: #f6f7fa;
    font-weight: 400;
    color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
.el-table .sort-caret.ascending {
    border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
.pages {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

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

@@ -1,7 +1,7 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="title"
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
@@ -13,6 +13,7 @@
          :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">
@@ -45,8 +46,8 @@
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="危险源关联" prop="associatedDanger">
              <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                <el-option label="是" value="admin"></el-option>
                <el-option label="否" value="common"></el-option>
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
@@ -88,13 +89,14 @@
                  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="telephone" @click="daiInpt" >
            <el-form-item label="应急队伍" prop="emergencyTeam" @click="daiInpt" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.emergencyTeam"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -123,9 +125,9 @@
            </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-form-item label="区域名称" prop="areaName">
              <el-input
                  v-model="ruleForm.teamLeader"
                  v-model="ruleForm.areaName"
                  placeholder="请选择"
                  class="input-with-select"
              >
@@ -139,20 +141,19 @@
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  ref,
  defineComponent
} from 'vue';
@@ -160,32 +161,28 @@
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 DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import CheckTemplate from '/@/components/checkTemplate/index.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'


import {emergencyPlanApi} from "/@/api/emergencyPlan";

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();
    const ruleForm = ref({
      name: '', // 预案名称
      type: '', //预案类型
      associatedDanger: '', // 危险源关联
@@ -193,20 +190,38 @@
      authorId: '', // 编写人
      authorDeptId: '', // 编写部门
      releaseDate: '', // 发布实施日期
      // telephone: '', // 应急队伍
    });
      fileList: [
        {
          fileUrl: 'url',
          fileName: 'name',
        }
      ],
      emergencyTeam: '', //应急队伍
      areaList: [
        {
          areaId: '',
        }
      ],  //区域列表
      areaName: '',  //区域名称
      teamList: [
        {
          teamId: '',
        }
      ],
      deptList: [
        {
          departmentId: '',
        }
      ]
    })
    const titles = ref();
    const disabled = ref();

    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
      titles.value = title;
      disabled.value = type;
    };
    //日期选择器
    const releaseDate = ref('')
@@ -331,62 +346,44 @@
        ],
      },
    ]
    // 必填项提示
    // 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 submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急预案管理') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyPlanApi()
              .addEmergencyPlan(ruleForm.value)
              .then((res) => {
                if (res.data.code == 200) {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'success',
                  });
                  emit('myAdd', true);
                } else {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                  });
                  emit('myAdd', true);
                }
                formEl.resetFields();
              });
          } else {
            console.log('error submit!', fields);
          }
        })
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
@@ -400,7 +397,10 @@
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.authorId=e.id
    };
    //全屏
    const full = ref(false);
@@ -413,22 +413,16 @@
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      releaseDate,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      regionsDialog,
@@ -436,6 +430,14 @@
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      resetForm,
      onUser,
    };
  },
});

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

对比新文件
@@ -0,0 +1,160 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="30%"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form :model="ruleForm" ref="ruleFormRef" label-width="80px">
        <el-form-item label="备注" >
          <el-input v-model="ruleForm.remark" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">取消</el-button>
          <el-button size="default" type="primary" @click="submitForm(titles,ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
  </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 {emergencyPlanLogApi} from "/@/api/emergencyPlanLog";

export default defineComponent({
  name: 'openAdd',
  components: {
  },
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();

    const ruleForm = ref({
      // id: id,
      remark: '',
    })
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    // const openDialog = (title: string ,id: number,) => {
    //   isShowDialog.value = true;
    //   titles.value = title;
    //   if (title == '启动') {
    //     emergencyPlanLogApi()
    //     .seeEmergencyPlanLog(id)
    //     .then((res) => {
    //       if (res.data.code == 200) {
    //         ruleForm.value = res.data.data;
    //       }
    //     });
    //   }
    // };
    const openDialog = (title: string) => {
      isShowDialog.value = true;
      titles.value = title;
    };
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '启动') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyPlanLogApi()
                .addEmergencyPlanLog(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();
                });
            ruleForm.value = {
              // id: id,
              remark: '',
            }
          } else {
            console.log('error submit!', fields);
          }
        });
      }
    };
    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,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      emit,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      submitForm,
      disabled,
      resetForm,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
</style>

 src/views/contingencyManagement/panManagement/index.vue

@@ -2,12 +2,12 @@
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input size="default" v-model="formInline.searchParams.name" placeholder="预案名称" style="max-width: 215px;"> </el-input>
            <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px;"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="default" v-model="formInline.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;">
            <el-select size="default" v-model="listQuery.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;">
              <el-option label="综合应急预案" value="admin"></el-option>
              <el-option label="现场处置方案" value="common"></el-option>
              <el-option label="专项应急预案" value="common"></el-option>
@@ -18,7 +18,7 @@
            <el-button size="default" type="primary" class="ml10" @click="onSubmit">
              查询
            </el-button>
            <el-button size="default" class="ml10">
            <el-button size="default" class="ml10" @click="submitReset">
              重置
            </el-button>
          </el-form-item>
@@ -31,12 +31,12 @@
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
          <el-button size="default" type="warning" plain :disabled="warning">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain disabled>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
@@ -46,39 +46,40 @@
          </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>
<!--          <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.data"
          :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="teamDescription" label="预案级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="phone" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="level" label="预案级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="260" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="dialogFormVisible = true">
            <el-button size="small" text type="primary" @click="isDialogFormVisible(scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
@@ -96,7 +97,7 @@
            <el-button  size="small" text type="primary" @click="abolish(0)">
             发起审批
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
@@ -107,33 +108,33 @@
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="formInline.pageIndex"
            v-model:page-size="formInline.pageSize"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            class="mt15"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            :total="total"
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
        />
      </div>
    </el-card>
    <OpenAdd ref="addRef"  @refreshRoleList="initTableData"/>
    <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
    <AbolishLibrary ref="abolishRef"/>
    <upData ref="upShow"></upData>
<!--    <StartUp ref="startRef" @myAdd="startUp"/>-->
    <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full">
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form :model="form" label-width="80px">
      <el-form  :model="form" ref="ruleFormRef" label-width="80px">
        <el-form-item label="备注" >
          <el-input v-model="form.remarks" type="textarea" autocomplete="off" />
          <el-input v-model="form.remark" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
        <el-button type="primary" @click="onDetermine"
        >确定</el-button
        >
      </span>
@@ -144,7 +145,6 @@

<script lang="ts">
import {
  toRefs,
  reactive,
  onMounted,
  ref,
@@ -153,9 +153,11 @@
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import {useRouter} from "vue-router"
import type {
  // FormInstance,
} from 'element-plus'
import { Plus,
  Edit,
  Delete,
@@ -168,48 +170,17 @@
  FullScreen
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
// import StartUp from '/@/views/contingencyManagement/panManagement/component/startUp.vue';
import AbolishLibrary from '/@/views/contingencyManagement/panManagement/component/abolishLibrary.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
// import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import {emergencyPlanApi} from "/@/api/emergencyPlan";
// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  teamPhone: string
  phone: string;
  describe: string;
  responsibleDepartment: string
  teamLeader: string
import {emergencyPlanLogApi} from "/@/api/emergencyPlanLog";

}

// 定义接口来定义对象的类型
interface TableDataRow {
  // userName: string;
  // userNickname: string;
  // roleSign: string;
  // department: string[];
  // phone: string;
  // email: string;
  // sex: string;
  // password: string;
  // overdueTime: Date;
  // // describe: string;
  // createTime: string;
}
//
interface TableDataState {
  tableData: {
    data: Array<TableDataRow>;
    total: number;
    loading: boolean;
  };
}
export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    // StartUp,
    AbolishLibrary,
    EditPen,
    Plus,
@@ -220,12 +191,12 @@
    Refresh,
    VideoPause,
    VideoPlay,
    UpData,
    // UpData,
    emergencyPlanApi
  },
  setup() {
    // 定义表单搜索
    const formInline = reactive({
  setup(prop, {emit}) {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
@@ -233,58 +204,112 @@
        type: "",
      }
    })
    // 搜索按钮
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const onSubmit = async () => {
      let res = await emergencyPlanApi().getEmergencyPlanList(formInline)
      let res = await emergencyPlanApi().getEmergencyPlanList(listQuery)
      if(res.data.code === '200'){
        state.tableData.data = res.data.data;
        state.tableData.total = state.tableData.data.length;
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      }else{
        ElMessage({
          type:'warning',
          showClose: true,
          type:'error',
          message:res.data.msg
        })
      }
    }
    // 定义表格数据
    const state = reactive<TableDataState>({
      tableData: {
        data: [],
        total: 0,
        loading: false,
      },
    })
    // 初始化表格数据
    const initTableData = async () => {
      let res = await emergencyPlanApi().getEmergencyPlanList(formInline)
      if(res.data.code === '200'){
        state.tableData.data = res.data.data;
        state.tableData.total = state.tableData.data.length;
      }else{
        ElMessage({
          type:'warning',
          message:res.data.msg
        })
    // 重置
    const submitReset = () => {
      listQuery.searchParams.name = '';
      listQuery.searchParams.type = '';
      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.toString();
      console.log(deleteAll.value);
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 启动弹窗
    const dialogTableVisible = ref(false)
    const isDialogFormVisible = (data: any) => {
      dialogFormVisible.value=true
      form.value.planId=data
    }
    const dialogFormVisible = ref(false)
    const form = reactive({
      remarks: '',
    const form = ref ({
      remark: '',
    })
    const onDetermine = () => {
      dialogFormVisible.value=false
      emergencyPlanLogApi()
        .addEmergencyPlanLog(form.value)
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              showClose: true,
              message: res.data.msg,
              type: 'success',
            });
            emit('myAdd', true);
          } else {
            ElMessage({
              showClose: true,
              message: res.data.msg,
              type: 'error',
            });
            emit('myAdd', true);
          }
        });
        form.value = {
          remark: '',
        }
    }
    // 新增后刷新
    // const startUp = (e: boolean) => {
    //   if (e) {
    //     onSubmit();
    //   } else {
    //     onSubmit();
    //   }
    // };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
      addRef.value.openDialog('新建应急预案管理');
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    //打开废止库弹窗
    const abolishRef = ref();
@@ -292,28 +317,74 @@
      abolishRef.value.openDialog();
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        emergencyPlanApi()
              .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(() => {
            ElMessage.success('删除成功');
            emergencyPlanApi()
                .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(() => {});
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      formInline.pageSize = val;
      listQuery.pageSize = val;
    };
    // 分页未改变
    const onHandleCurrentChange = (val: number) => {
      formInline.pageIndex = val;
      listQuery.pageIndex = val;
    };

    const router=useRouter()
@@ -344,15 +415,14 @@
        full.value = false;
      }
    };
    // 页面加载时
    onMounted(() => {
      onSubmit();
    });
    return {
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      initTableData,
      dialogTableVisible,
      dialogFormVisible,
      form,
      // upButton,
      // upShow,
      tableData,
      onSubmit,
      onOpenAdd,  //新增
      onabolishLibrary,
@@ -367,9 +437,24 @@
      toggleFullscreen,
      FullScreen,
      full,
      formInline,
      listQuery,
      pageIndex,
      pageSize,
      total,
      submitReset,
      onMounted,
      ...toRefs(state),
      deleteAll,
      warning,
      danger,
      handleSelectionChange,
      onMyAdd,
      onDeleteAll,
      // dialogTableVisible,
      dialogFormVisible,
      isDialogFormVisible,
      form,
      emit,
      onDetermine,
    };
  },
});