Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut

Your Name

2022-07-11 7b9c91f9feb33f901aa09174fbbf119ee3ebcb24

Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut

 .env.development

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

# 本地环境接口地址
VITE_API_URL = 'http://192.168.0.35:8008'
VITE_API_URL = 'http://192.168.0.76:8009'

# VITE_API_URL = 'http://192.168.0.8:8008'
# VITE_API_URL = 'http://192.168.0.10:8008'

 src/api/contingency/index.ts

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

export function contingencyApi(){
    return{
        getTeamManagementList: (params: object) => {
            return request({
                url: '/emergencyTeam/page/list',
                method: 'post',
                data:params
            })
        }
    }
}

 src/components/DailogSearch/DailogSearch.vue

@@ -1,7 +1,7 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable>
        <el-row>
            <el-col :span="18">
            <el-col :span="17">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
            <el-row>
                <el-col :span="6">
@@ -43,7 +43,7 @@
            @current-change="handleCurrentChange"
        />
        </el-col>
        <el-col :span="6">
        <el-col :span="7">
            <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>

 src/components/DailogSearchUser/index.vue

@@ -9,7 +9,7 @@
                    </div>
                </div>
            </el-col>
            <el-col :span="14">
            <el-col :span="14" style="padding:20px">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="10" :offset="1">
@@ -26,13 +26,7 @@
                    </el-row>
                </el-form>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center" width="50px">
                        <template #default>
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large"> </el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="50px" type="selection"></el-table-column>
                    <el-table-column align="center" prop="date" label="安全目标指标" />
                    <el-table-column align="center" prop="name" label="目标指标编号" />
                    <el-table-column align="center" prop="address" label="年度" />

 src/components/userSelections/index.vue

对比新文件
@@ -0,0 +1,331 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="用户选择"
        v-model="isShowDialog"
        width="1000px"
        draggable
    >
      <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
        <el-aside width="200px">
          <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
          <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin-right: 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" class="ml10" @click="onSubmit">
                  查询
                </el-button>
                <el-button size="default" class="ml10" @click="submitReset">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </el-header>
          <el-main>
            <el-scrollbar>
              <el-table
                  :data="tableData"
                  :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                  ref="multipleTableRef"
                  highlight-current-row
                  @row-click="rowClick"
                  @selection-change="handleCurrentChange"
              >
                <el-table-column
                  type="selection"
                  width="50"
                >
                </el-table-column>
                <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属机构" width="110"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
                <el-table-column  label="状态"
                  prop="tag"
                  width="100"
                  :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                        :filter-method="filterTag"
                        filter-placement="bottom-end">
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.tag === 'Home' ? '' : 'success'"
                        disable-transitions
                    >{{ scope.row.tag }}</el-tag
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </el-main>
        </el-container>
        <div>
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </el-container>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

import type {
  ElTree,
  ElTable,
} from 'element-plus'

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


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

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

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

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

    // 树形结构内容
    const data: Tree[] = [
      {
        id: 1,
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            id: 4,
            label: '经营班子',
            children: []
          },
        ],
      },
      {
        id: 2,
        label: '生产运行部',
        children: [
          {
            id: 5,
            label: '工艺二班',
          },
          {
            id: 6,
            label: '灌装一班',
          },
        ],
      },
      {
        id: 3,
        label: '设备部',
        children: [
          {
            id: 7,
            label: '仪表班',
          },
          {
            id: 8,
            label: '机修班',
          },
        ],
      },
    ]
    const item = {
      date: '龚赛健',
      name: '龚赛健',
      address: '综合办公室',
      tag: '正常',
    }
    const tableData = ref(Array.from({ length: 5 }).fill(item))

    // 定义表单搜索
    const formInline = reactive({
      name: '',
    })
    // 搜索按钮
    const onSubmit = () => {
      console.log('submit!')
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // const currentRow = ref()

    // 当某一行被点击时会触发该事件
    // const handleRowClick = (row: any, column: any, event: Event) => {
    //   emit('row-click', row, column, event)
    // }
    // const singleTableRef = ref<InstanceType<typeof ElTable>>()
    // const setCurrent = (row?: User) => {
    //   singleTableRef.value!.setCurrentRow(row)
    // }
    // const handleCurrentChange = (val: User | undefined) => {
    //   currentRow.value = val
    // }

    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      defaultProps,
      filterNode,
      data,
      tableData,
      formInline,
      onSubmit,
      // currentRow,
      // setCurrent,
      multipleTableRef,
      handleClose,
      dynamicTags,
      // handleCurrentChange,
    };
  },
});
</script>
<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
}
.layout-container-demo .el-aside {
  padding: 10px;
  border: 1px solid #ebeef5;
  color: var(--el-text-color-primary);
}
::v-deep .el-input--large .el-input__inner {
  height: 32px!important;
  line-height: 32px!important;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-input--large{
  //width: 178px;
  height: 32px;
}
.el-tree{
  overflow: auto;
}
::-webkit-scrollbar {
  height: 1px;

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
</style>

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

@@ -36,7 +36,7 @@
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -126,6 +126,7 @@
      </template>
    </el-dialog>
        <AddEmergencyPersonnel ref="addRef" />
        <UserSelections ref="userRef"/>
  </div>
</template>

@@ -146,6 +147,7 @@
  Search
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import UserSelections from "/@/components/userSelections/index.vue"
// 定义表格数据类型
interface User {
  personnelName: string
@@ -156,7 +158,8 @@
export default defineComponent({
  name: 'openAdd',
  components: {
    AddEmergencyPersonnel
    AddEmergencyPersonnel,
    UserSelections,
  },
  setup() {
    const isShowDialog = ref(false)
@@ -234,6 +237,11 @@
        ],
      },
    ]
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    //定义tabs切换
    const activeName = ref('first')

@@ -324,6 +332,8 @@
      submitForm,
      rules,
      addRef,
      userRef,
      openUser,
      onAddEmergencyPersonnel,
    };
  },

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

@@ -31,7 +31,7 @@
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -89,10 +89,10 @@
                    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="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 prop="jobNumber" label="人员工号" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column prop="personnelName" 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="position" label="职位" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                      <el-button size="small" type="primary" text="plain" >查看
@@ -116,9 +116,9 @@
                </span>
      </template>
    </el-dialog>
    <userSelections ref="userRef"/>
    <AddEmergencyPersonnel ref="addRef" />
    <EditEmergencyPersonnel ref="editRef" />

  </div>
</template>

@@ -140,6 +140,7 @@
import {
  Search
} from '@element-plus/icons-vue'
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";
// 定义表格数据类型
@@ -193,6 +194,7 @@
export default defineComponent({
  name: 'openEdit',
  components: {
    UserSelections,
    AddEmergencyPersonnel,
    EditEmergencyPersonnel
  },
@@ -392,6 +394,12 @@
      ],
    })

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

    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
@@ -435,6 +443,8 @@
      ruleFormRef,
      tableData,
      multipleTableRef,
      openUser,
      userRef,
      ...toRefs(state),
    };
  },

 src/views/contingencyManagement/contingency/index.vue

@@ -4,10 +4,10 @@
      <div class="system-user-search mb15">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input size="default" v-model="formInline.name" placeholder="队伍名称"> </el-input>
            <el-input size="default" v-model="formInline.teamName" placeholder="队伍名称"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="default" v-model="formInline.level" placeholder="请选择队伍级别">
            <el-select size="default" v-model="formInline.teamType" placeholder="请选择队伍级别">
              <el-option label="公司" value="shanghai"></el-option>
              <el-option label="分厂-车间" value="beijing"></el-option>
              <el-option label="工序-班组等" value="beijing"></el-option>
@@ -60,7 +60,7 @@
        </div>
      </div>
      <el-table
          :data="tableData"
          :data="tableData.data"
          style="width: 100%"
          ref="multipleTableRef"
      >
@@ -68,11 +68,11 @@
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamPhone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <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="teamPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
@@ -93,20 +93,19 @@
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10,20,50,100]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
      <el-pagination
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="mt15"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          v-model:current-page="formInline.pageIndex"
          background
          v-model:page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
      >
      </el-pagination>
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
@@ -117,9 +116,9 @@

<script lang="ts">
import {
  // toRefs,
  toRefs,
  reactive,
  // onMounted,
  onMounted,
  ref,
  defineComponent
} from 'vue';
@@ -141,6 +140,10 @@
import OpenEdit from '/@/views/contingencyManagement/contingency/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/contingency/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/contingency/component/upData.vue';
import {contingencyApi} from "/@/api/contingency";
import {Session} from "/@/utils/storage";
import {initBackEndControlRoutes} from "/@/router/backEnd";


// 定义表格数据类型
interface User {
@@ -157,19 +160,25 @@

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

//
interface TableDataState {
  tableData: {
    data: Array<TableDataRow>;
    total: number;
    loading: boolean;
    param: {
      pageIndex: number;
      pageSize: number;
    }
  };
}
export default defineComponent({
  name: 'systemUser',
  components: {
@@ -184,20 +193,33 @@
    Upload,
    Download,
    Refresh,
    UpData
    UpData,
    contingencyApi
  },
  setup() {
    // 定义表单搜索
    const formInline = reactive({
      name: '',
      level: '',
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
      teamName: "",
      teamType: "",
    }
    })
    // 搜索按钮
    const onSubmit = () => {
      console.log('submit!')
    const onSubmit = 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 editRef = ref();

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

@@ -207,61 +229,82 @@
      upShow.value.openDialog()
    }
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        telephone: '051383830321',
        teamPhone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
    const state = reactive<TableDataState>({
      tableData: {
        data: [],
        total: 0,
        loading: false,
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        telephone: '051383830321',
        teamPhone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        telephone: '051383830321',
        teamPhone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        telephone: '051383830321',
        teamPhone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
    })
    // 初始化表格数据
    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 tableData: User[] = [
    //   {
    //     teamName: '应急救援组',
    //     teamLevel: '公司',
    //     teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
    //     telephone: '051383830321',
    //     teamPhone: '13603812900',
    //     describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
    //         '(2)负责现场被困人员、受伤人员抢救工作；\n' +
    //         '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
    //         '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
    //     responsibleDepartment: '仪表班',
    //     teamLeader: '王磊',
    //   },
    //   {
    //     teamName: '应急救援组',
    //     teamLevel: '公司',
    //     teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
    //     telephone: '051383830321',
    //     teamPhone: '13603812900',
    //     describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
    //         '(2)负责现场被困人员、受伤人员抢救工作；\n' +
    //         '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
    //         '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
    //     responsibleDepartment: '仪表班',
    //     teamLeader: '王磊',
    //   },
    //   {
    //     teamName: '应急救援组',
    //     teamLevel: '公司',
    //     teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
    //     telephone: '051383830321',
    //     teamPhone: '13603812900',
    //     describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
    //         '(2)负责现场被困人员、受伤人员抢救工作；\n' +
    //         '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
    //         '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
    //     responsibleDepartment: '仪表班',
    //     teamLeader: '王磊',
    //   },
    //   {
    //     teamName: '应急救援组',
    //     teamLevel: '公司',
    //     teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
    //     telephone: '051383830321',
    //     teamPhone: '13603812900',
    //     describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
    //         '(2)负责现场被困人员、受伤人员抢救工作；\n' +
    //         '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
    //         '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
    //     responsibleDepartment: '仪表班',
    //     teamLeader: '王磊',
    //   }
    // ]
    //查看用户弹窗
    const seeRef = ref();
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
@@ -271,6 +314,7 @@
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const editRef = ref();
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
@@ -287,22 +331,17 @@
          .catch(() => {});
    };
    // 分页改变
    const currentPage = ref(4);
    const pageSize = ref(10);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    const onHandleSizeChange = (val: number) => {
      formInline.pageSize = val;
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    const onHandleCurrentChange = (val: number) => {
      formInline.pageIndex = val;
    };
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    onMounted(() => {
      initTableData();
    });
    return {
      // value,
      // options,
@@ -312,7 +351,7 @@
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      // tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
@@ -320,11 +359,9 @@
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      currentPage,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      // ...toRefs(state),
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state),
    };
  },
});

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

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

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

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

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

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

 src/views/contingencyManagement/emergencyPlanStartRecord/index.vue

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

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

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

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

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

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

对比新文件
@@ -0,0 +1,338 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
          <el-option label="公司" value="shanghai"></el-option>
          <el-option label="分厂-车间" value="beijing"></el-option>
          <el-option label="工序-班组等" value="beijing"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <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 @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"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

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

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

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

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

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

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

import {
  Search
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'addTeamLeader',
  components: {
    // Search,
  },
  setup() {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
      selectPeople: '', // 选择人员
      jobNumber: '', //人员工号
      personnelName: '', // 人员名称
      personnelGender: '', // 人员性别
      phone: '', // 手机号码
      position: '', // 职位
    });
    const rules = reactive<FormRules>({
      jobNumber: [
        {
          required: true,
          message: '人员工号不能为空',
          trigger: 'change',
        },
      ],
      personnelName: [
        {
          required: true,
          message: '人员名称不能为空',
          trigger: 'change',
        },
      ],
      personnelGender: [
        {
          required: true,
          message: '人员性别不能为空',
          trigger: 'change',
        },
      ],
      phone: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'change',
        },
      ],
      position: [
        {
          required: true,
          message: '职位不能为空',
          trigger: 'change',
        },
      ],
    })
    const 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 openDialog = () => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      ruleFormRef,
      submitForm,
      onCancel,
      ruleForm,
      rules,
      Search,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

对比新文件
@@ -0,0 +1,442 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建应急预案管理"
        v-model="isShowDialog"
        width="769px"
        draggable
    >
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="预案名称" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="适用部门" prop="responsibleDepartment">
              <el-tree-select
              v-model="treeSelect"
              :data="tree"
              multiple
              :render-after-expand="true"
              show-checkbox
              />
              <el-divider />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="预案类型" prop="teamLeader">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="综合应急预案" value="admin"></el-option>
                <el-option label="现场处置方案" value="common"></el-option>
                <el-option label="专项应急预案" value="common"></el-option>
                <el-option label="其他预案" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="危险源关联" prop="teamLevel">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="是" value="admin"></el-option>
                <el-option label="否" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="预案级别" prop="teamPhone">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="公司级" value="admin"></el-option>
                <el-option label="分厂级" value="common"></el-option>
                <el-option label="车间级" value="common"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="编写人" prop="telephone" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="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-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发布实施日期" prop="telephone">
<!--              <el-tree-select-->
<!--                  v-model="ruleForm.responsibleDepartment"-->
<!--                  :data="data" class="w100"-->
<!--                  placeholder="请选择"/>-->
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="相关附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary"
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="区域名称" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="regionsDialog"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <DailogSearch ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

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

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

import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import DailogSearch from '/@/views/contingencyManagement/panManagement/component/DailogSearch.vue'
import RegionsDialog from '/@/views/contingencyManagement/panManagement/component/regionsDialog.vue'

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

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

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

对比新文件
@@ -0,0 +1,460 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog title="编辑应急队伍管理" v-model="isShowDialog" width="769px">
      <el-form
          ref="ruleFormRef"
          :rules="rules"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="队伍名称" prop="teamName">
              <el-input v-model="ruleForm.teamName"></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">
                <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="teamLeader">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人部门" prop="responsibleDepartment">
              <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" class="w100"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人手机" prop="teamPhone">
              <el-input v-model="ruleForm.teamPhone"></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-input v-model="ruleForm.telephone"></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
                  class="textarea"
                  v-model="ruleForm.describe"
                  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="相关附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="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 sortable></el-table-column>
                  <el-table-column prop="personnelName" 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="position" label="职位" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                      <el-button size="small" type="primary" text="plain" >查看
                      </el-button>
                      <el-button size="small" type="primary" text="plain" @click="onEditEmergencyPersonnel(scope.row)" style="margin-right: 5px;">编辑
                      </el-button>
                      <el-button size="small" type="primary" text="plain" style="margin-right: 5px;">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <userSelections ref="userRef"/>
    <AddEmergencyPersonnel ref="addRef" />
    <EditEmergencyPersonnel ref="editRef" />
  </div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  defineComponent
} from 'vue';
import type {
  UploadUserFile,
  TabsPaneContext,
  FormInstance,
  FormRules,
  ElTable,
} from 'element-plus'
import {
  Search
} from '@element-plus/icons-vue'
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 User {
  personnelName: string
  jobNumber: string
  phone: string;
  position: string;
}
// 定义接口来定义对象的类型
interface TableDataRow {
  // userName: string;
  // userNickname: string;
  // roleSign: string;
  // department: string[];
  // phone: string;
  // email: string;
}
// 定义接口来定义对象的类型
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>;
}

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

    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // // 新增
    // const onSubmit = () => {
    //   closeDialog();
    // };
    // 初始化部门数据
    const initTableData = () => {
      state.deptData.push({
        deptName: 'vueNextAdmin',
        createTime: new Date().toLocaleString(),
        status: true,
        sort: Math.random(),
        describe: '顶级部门',
        id: Math.random(),
        children: [
          {
            deptName: 'IT外包服务',
            createTime: new Date().toLocaleString(),
            status: true,
            sort: Math.random(),
            describe: '总部',
            id: Math.random(),
          },
          {
            deptName: '资本控股',
            createTime: new Date().toLocaleString(),
            status: true,
            sort: Math.random(),
            describe: '分部',
            id: Math.random(),
          },
        ],
      });
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])

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

    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
    //添加队伍负责人弹窗
    const addRef = ref();
    const onAddEmergencyPersonnel = () => {
      addRef.value.openDialog();
    };

    //定义表格数据
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    const tableData: User[] = [
      {
        personnelName: '张志刚',
        jobNumber: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNumber: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNumber: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNumber: '1037',
        position: '副组长',
        phone: '13673321356',
      }
    ]
    // 必填项提示
    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 userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };

    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      state.ruleForm = row;
      state.isShowDialog = true;
    };
    // 表单提交验证必填项
    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 editRef = ref();
    const onEditEmergencyPersonnel = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      // onSubmit,
      fileList,
      responsibleDepartment,
      data,
      activeName,
      handleClick,
      multipleSelection,
      onAddEmergencyPersonnel,
      onEditEmergencyPersonnel,
      addRef,
      editRef,
      submitForm,
      Search,
      rules,
      ruleFormRef,
      tableData,
      multipleTableRef,
      openUser,
      userRef,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
</style>

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

对比新文件
@@ -0,0 +1,354 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="查看应急队伍管理"
        v-model="isShowDialog"
        width="769px"
        draggable
    >
      <el-form :model="ruleForm" size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="队伍名称">
              <el-input v-model="ruleForm.teamName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="队伍级别">
              <el-select v-model="ruleForm.teamLevel" :disabled="true" class="w100">
                <el-option label="公司" value="admin"></el-option>
                <el-option label="分厂-车间" value="common"></el-option>
                <el-option label="工序-班组等" value="shang"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="队伍负责人">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="Please input"
                  class="input-with-select"
                  :disabled="true"
              >
                <template #append>
                  <el-button :icon="Search"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人部门">
              <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data"  :disabled="true" class="w100"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人手机">
              <el-input v-model="ruleForm.teamPhone" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="固定电话">
              <el-input v-model="ruleForm.telephone" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="队伍描述">
              <el-input class="textarea" v-model="ruleForm.describe" type="textarea" :disabled="true" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="相关附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary" disabled
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="应急队伍人员" name="first">
                <el-button type="primary" size="default" disabled>新增</el-button>
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-top: 15px;"
                    ref="multipleTableRef"
                    :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
                >
                  <el-table-column prop="jobNo" label="人员工号" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="personnelName" label="人员名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                      <el-button disabled size="small" text="plain" >查看
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
                </span>
      </template>
    </el-dialog>
<!--    <AddTeamLeader ref="addRef" />-->
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue';
import type {
  UploadUserFile,
  TabsPaneContext,
} from 'element-plus'
import {
  Search
} from '@element-plus/icons-vue'
// import AddTeamLeader from '/@/views/contingency/component/addEmergencyPersonnel.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;
  department: any;
  phone: string;
  telephone: string;
  describe: string;
}
interface UserState {
  isShowDialog: boolean;
  ruleForm: RuleFormRow;
  deptData: Array<DeptData>;
}
// 定义表格数据类型
interface User {
  personnelName: string
  jobNo: string
  phone: string;
  position: string;
}
// // 定义表格数据类型
// interface Team {
//   personnelName: string
//   teamLevel: string
//   teamDescription: string
//   teamPhone: string
//   phone: string;
//   describe: string;
//   responsibleDepartment: string
// }
export default defineComponent({
  name: 'openSee',
  components: {
    // Search,
  },
  setup() {
    const state = reactive<UserState>({
      isShowDialog: false,
      ruleForm: {
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
        describe: '', // 队伍描述
      },
      deptData: [], // 部门数据
    });
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      state.ruleForm = row;
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 初始化部门数据
    const initTableData = () => {
      state.deptData.push({
        deptName: 'vueNextAdmin',
        createTime: new Date().toLocaleString(),
        status: true,
        sort: Math.random(),
        describe: '顶级部门',
        id: Math.random(),
        children: [
          {
            deptName: 'IT外包服务',
            createTime: new Date().toLocaleString(),
            status: true,
            sort: Math.random(),
            describe: '总部',
            id: Math.random(),
          },
          {
            deptName: '资本控股',
            createTime: new Date().toLocaleString(),
            status: true,
            sort: Math.random(),
            describe: '分部',
            id: Math.random(),
          },
        ],
      });
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])

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

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

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

    // //添加队伍负责人
    // const addRef = ref();
    // //添加队伍负责人弹窗
    // const onAddTeamLeader = () => {
    //   addRef.value.openDialog();
    // };
    return {
      openDialog,
      closeDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      activeName,
      handleClick,
      tableData,
      multipleSelection,
      Search,
      // addRef,
      // onAddTeamLeader,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
</style>

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

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

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

对比新文件
@@ -0,0 +1,109 @@
<template>
  <el-dialog
      v-model="dialogVisible"
      title="导入Excel"
      width="50%"
      draggable
  >
    <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="3"
        :on-exceed="handleExceed"
    >
      <el-button size="default">下载模板</el-button>
      <el-button size="default" type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只允许导入“xls”或“xlsx”格式文件！
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script lang="ts">
import { ref,
  defineComponent,
} from "vue";
import {
  ElMessage,
  ElMessageBox
} from "element-plus";
import type {
  UploadProps,
  UploadUserFile,
} from "element-plus";

export default defineComponent({
  setup() {
    let dialogVisible =ref<boolean>(false)
    const fileList = ref<UploadUserFile[]>([
      // {
      //   name: "element-plus-logo.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
      // {
      //   name: "element-plus-logo2.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
    ]);

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

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

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

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

 src/views/contingencyManagement/panManagement/index.vue

对比新文件
@@ -0,0 +1,389 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="default" placeholder="预案名称" style="max-width: 215px;"> </el-input>
        <el-select size="default" v-model="value" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;">
          <el-option label="综合应急预案" value="admin"></el-option>
          <el-option label="现场处置方案" value="common"></el-option>
          <el-option label="专项应急预案" value="common"></el-option>
          <el-option label="其他预案" value="common"></el-option>
        </el-select>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="submitReset">
          重置
        </el-button>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain disabled>
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
          <el-button size="default" type="primary"  @click="onOpenAdd">
            废止库
          </el-button>
        </div>
        <div class="button_Right">
          <el-button @click="upButton">
            <el-icon>
              <Upload />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Download />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Refresh />
            </el-icon>
          </el-button>
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
      >
        <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 label="操作" width="260" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="dialogFormVisible = true">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
             发起审批
            </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>
      <!--      <el-pagination-->
      <!--          @size-change="onHandleSizeChange"-->
      <!--          @current-change="onHandleCurrentChange"-->
      <!--          class="mt15"-->
      <!--          :pager-count="5"-->
      <!--          :page-sizes="[10, 20, 30]"-->
      <!--          v-model:current-page="tableData.param.pageNum"-->
      <!--          background-->
      <!--          v-model:page-size="tableData.param.pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
    </el-card>
<!--    <OpenSee ref="seeRef" />-->
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
    <el-dialog v-model="dialogFormVisible" width="30%" title="启动">
      <el-form :model="form" label-width="80px">
        <el-form-item label="备注" >
          <el-input v-model="form.remarks" 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
        >
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  // onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.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;
}

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    // const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

    // 上传
    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 onOpenSee = (row: TableDataRow) => {
    //   seeRef.value.openDialog(row);
    // };
    // 启动弹窗
    const dialogTableVisible = ref(false)
    const dialogFormVisible = ref(false)
    const form = reactive({
      remarks: '',
    })
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            ElMessage.success('删除成功');
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      // onOpenSee, //查看
      dialogTableVisible,
      dialogFormVisible,
      form,
      // seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

 src/views/goalManagement/Goalsummary/index.vue

对比新文件
@@ -0,0 +1,199 @@
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.pass" placeholder="年度" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-select v-model="ruleForm.region" placeholder="请选择责任部门">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="minCenter">
        <div class="btns">
            <p>汇总日期:2022-07-04 23:00:07</p>
            <div>
                <el-button type="primary" :icon="Download">导出</el-button>
            </div>
        </div>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="责任部门" align="center" >
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="安全目标指标" />
            <el-table-column property="address" label="考核指标" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="1月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="2月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="3月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="4月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="5月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="6月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="7月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="8月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="9月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="10月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="11月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="12月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="考核结果" align="center"  show-overflow-tooltip />
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
interface User {
    date: string;
    name: string;
    address: string;
}
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
export default defineComponent({
    components: { ElButton, ElInput },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        const resetForm = (formEl: FormInstance | undefined) => {
            console.log(!formEl);
            if (!formEl) return;
            formEl.resetFields();
        };
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        };

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        return {
            ruleForm,
            resetForm,
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: left;
}
.btns p{
    font-size: 18px;
    line-height: 40px;
    margin-right: 20px;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/performanceAppraisal/index.vue

对比新文件
@@ -0,0 +1,12 @@
<template>
    
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        
    },
})
</script>

 src/views/goalManagement/processForms/component/formInformationTop.vue

文件名从 src/views/goalManagement/targetEscalation/processForms.vue 修改
@@ -1,41 +1,26 @@
<template>
    <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
    <div class="box">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#fff"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
    >
        <el-menu-item index="1">表单信息</el-menu-item>
        <el-menu-item index="2">流程图</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == 1" class="navType">
        <el-form ref="form" :model="form" label-width="120px">
            <el-row style="padding: 20px">
    <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="name"></el-input>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="name"></el-input>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="padding: 20px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="name"></el-input>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值">
                        <el-input v-model="name"></el-input>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
@@ -50,7 +35,7 @@
                    <el-table-column align="center" prop="address" label="制定日期" />
                    <el-table-column align="center"  label="检查值">
                        <template #default>
                         <el-input v-model="address" placeholder=""></el-input>
                         <el-input v-model="form.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="检查人" />
@@ -69,26 +54,13 @@
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div v-if="activeIndex == 2" class="navType">cccccccc</div>
    </div>
    <lowerPlate></lowerPlate>
    <div class="btns">
        <el-button type="primary">发起上报</el-button>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import lowerPlate from './component/lowerPlate.vue'
import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    components:{lowerPlate},
    setup() {
        const activeIndex = ref('1');
        const handleSelect = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath);
            activeIndex.value = key;
        };
        const form = reactive({
    setup() {
            const form = reactive({
            name: '',
            region: '',
            date1: '',
@@ -98,23 +70,21 @@
            resource: '',
            desc: '',
        });
        const activeName = ref('1');
        const tableData = [
            const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        return {
            activeIndex,
            handleSelect,
            form,
            activeName,
            tableData
        };
    },
});
        const activeName = ref('1');
        return{
            form,
            tableData,
            activeName
        }
    },
})
</script>
<style scoped>
.title {
@@ -163,4 +133,12 @@
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
    
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0 ;
}
</style>

 src/views/goalManagement/processForms/component/formInformationTops.vue

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

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

 src/views/goalManagement/processForms/component/lowerPlate.vue

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

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

 src/views/goalManagement/processForms/processForms.vue

对比新文件
@@ -0,0 +1,122 @@
<template>
    <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
    <div class="box">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#ebeef5"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
    >
        <el-menu-item index="1">表单信息</el-menu-item>
        <el-menu-item index="2">流程图</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == 1" class="navType">
        <formInformationTop v-if="false"></formInformationTop>
        <formInformationTops></formInformationTops>
    </div>
    <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
        <div class="title2">流程图</div>
        <div style="width:100%;height:400px"></div>
    </div>
    </div>
    <lowerPlate></lowerPlate>
    <div class="btns">
        <el-button type="primary">发起上报</el-button>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import formInformationTop from './component/formInformationTop.vue'
import formInformationTops from './component/formInformationTops.vue'
import lowerPlate from './component/lowerPlate.vue'
export default defineComponent({
    components:{lowerPlate,formInformationTop,formInformationTops},
    setup() {
        const activeIndex = ref('1');
        const handleSelect = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath);
            activeIndex.value = key;
        };
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
	
        const router=useRouter()
        const Type=onMounted(()=>{
            // console.log("xxxxxxx",router)
        })
		
        return {
            activeIndex,
            handleSelect,
            form,
            router,
            Type
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
</style>

 src/views/goalManagement/safetyAssessment/component/Dailog.vue

对比新文件
@@ -0,0 +1,129 @@
<template>
    <el-dialog v-model="dialogVisible" title="目标分解" width="70%" draggable>
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="form.name">
                            <template #append> <el-button :icon="Search" @click="daiInpt" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="目标指标分解" name="1">
            </el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column align="center" prop="date" label="责任部门" />
            <el-table-column align="center" prop="name" label="考核指标" />
            <el-table-column align="center" prop="address" label="制定部门" />
            <el-table-column align="center" prop="address" label="制定日期" />
            <el-table-column align="center" prop="address" label="上报值" />
            <el-table-column align="center" prop="address" label="上报时间" />
            <el-table-column align="center" prop="address" label="考核结果" />
            <el-table-column align="center" prop="address" label="考核人" />
            <el-table-column align="center" prop="address" label="考核时间" />
            <el-table-column align="center" label="操作">
                <template #default>
                    <el-button link type="primary">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
  <DailogSearch ref="Shows"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue'
export default defineComponent({
    components:{DailogSearch},
    setup() {
        const dialogVisible = ref<boolean>(false);
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
        const openDailog = (type: string, value: any, projectList: any, projectId: string) => {
            dialogVisible.value = true;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        // 安全目标指标弹窗
        const Shows=ref()
        const daiInpt=()=>{
            Shows.value.openDailog()
        }
        return {
            form,
            dialogVisible,
            openDailog,
            activeName,
            tableData,
            Shows,
            daiInpt,
            Search,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/safetyAssessment/index.vue

对比新文件
@@ -0,0 +1,198 @@
<template>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.pass" placeholder="请输入目标指标" />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                </el-form-item>
            </el-col> -->
            <el-col :span="4">
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="minCenter">
            <div class="btns">
                <div>
                    <el-button type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                </div>
                <div>
                    <el-button :icon="Refresh"></el-button>
                </div>
            </div>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="70" />
            <el-table-column label="安全目标指标" align="center" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="考核指标编号" sortable />
            <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="指标值" align="center" sortable show-overflow-tooltip />
            <el-table-column label="操作" align="center" sortable show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button>
                    <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <Dailog ref="openAdd"></Dailog>
    </div>
</template>
<script lang="ts">
import Dailog from './component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
interface User {
    date: string;
    name: string;
    address: string;
}
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
export default defineComponent({
    components: { ElButton, ElInput, Dailog },
    setup() {
            // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        const resetForm = (formEl: FormInstance | undefined) => {
      console.log(!formEl);
      if (!formEl) return;
      formEl.resetFields();
    };
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        };

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 弹窗
        const openAdd = ref();
        const openD = (type: String, value: any) => {
            openAdd.value.openDailog(type, value);
        };

        return {
            ruleForm,
            resetForm,
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            openAdd,
            openD,
            small,
            disabled,
            background,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
        };
    },
});
</script>
<style scoped>
.topTitle {
  background-color: #fff;
  padding: 20px 0px 20px 0px;
  margin-bottom:10px ;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/targetEscalation/component/lowerPlate.vue

文件已删除

 src/views/goalManagement/targetEscalation/index.vue

@@ -14,13 +14,13 @@
            <el-table-column property="address" label="指标值" align="center" sortable show-overflow-tooltip />
            <el-table-column v-if="activeName == 1" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom">检查</el-button>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(0)">检查</el-button>
                    <el-button link type="primary" size="default" :icon="View" @click="openDai(tableData)">记录</el-button>
                </template>
            </el-table-column>
            <el-table-column v-if="activeName == 2" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="handleClick">上报</el-button>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(1)">上报</el-button>
                </template>
            </el-table-column>
        </el-table>
@@ -121,9 +121,12 @@
        }
        // 流程表单
        const router=useRouter()
        const jumpFrom=()=>{
        const jumpFrom=(data:string)=>{
            router.push({
                path:"/processForms"
                path:"/processForms",
                query:{
                    type:data
                }
            })
        }
        return {

 src/views/goalManagement/targetImprovements/component/Dailogprove.vue

对比新文件
@@ -0,0 +1,92 @@
<template>
    <el-dialog v-model="dialogVisible" title="Tips" width="50%" :before-close="handleClose">
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="责任部门">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="改进期限">
                        <el-date-picker v-model="form.date1" type="date" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="发起人">
                        <el-input v-model="model"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="发起时间">
                        <el-date-picker v-model="form.date1" type="date" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="目标指标" name="first"></el-tab-pane>
        </el-tabs>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Plus, Delete, Upload, Download, Refresh, View, Search } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref(false);
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
        const openDailog = () => {
            dialogVisible.value = true;
        };
        const activeName = ref('first');
        return {
            dialogVisible,
            form,
            openDailog,
            activeName,
            Search,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/targetImprovements/index.vue

对比新文件
@@ -0,0 +1,310 @@
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.pass" placeholder="安全目标指标" />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                </el-form-item>
            </el-col> -->
            <el-col :span="4">
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="minCenter">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="发起改进" name="1">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
                    <el-table-column label="序号" align="center" type="index" width="70" />
                    <el-table-column label="安全目标指标" align="center" sortable>
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column property="name" align="center" label="目标指标编号" sortable />
                    <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="责任部门" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="考核指标" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="上报值" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="考核时间" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="考核结果" align="center" sortable show-overflow-tooltip />
                    <el-table-column label="操作" align="center" width="200" sortable show-overflow-tooltip>
                        <template #default>
                            <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button>
                            <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination
                        v-model:currentPage="currentPage4"
                        v-model:page-size="pageSize4"
                        :page-sizes="[100, 200, 300, 400]"
                        :small="small"
                        :disabled="disabled"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="整改" name="2">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
                    <el-table-column label="序号" align="center" type="index" width="70" />
                    <el-table-column label="安全目标指标" align="center" sortable>
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column property="name" align="center" label="目标指标编号" sortable />
                    <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="责任部门" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="考核指标" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="改进期限" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="发起人" align="center" sortable show-overflow-tooltip />
                    <el-table-column property="address" label="发起时间" align="center" sortable show-overflow-tooltip />
                    <el-table-column label="操作" align="center" width="200" sortable show-overflow-tooltip>
                        <template #default>
                            <el-button link type="primary" size="default" :icon="View" @click="openDai">查看</el-button>
                            <el-button link type="primary" size="default" :icon="Delete" @click="jump">整改上报</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination
                        v-model:currentPage="currentPage4"
                        v-model:page-size="pageSize4"
                        :page-sizes="[100, 200, 300, 400]"
                        :small="small"
                        :disabled="disabled"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="验证" name="3">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="70" />
            <el-table-column label="安全目标指标" align="center" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="目标指标编号" sortable />
            <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="责任部门" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="考核指标" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="整改值" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="整改时间" align="center" sortable show-overflow-tooltip />
            <el-table-column label="操作" align="center" width="200" sortable show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button>
                    <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
            </el-tab-pane>
            <el-tab-pane label="完成" name="4">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="70" />
            <el-table-column label="安全目标指标" align="center" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="目标指标编号" sortable />
            <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="责任部门" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="考核指标" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="整改值" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="整改时间" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="验证结果" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="验证日期" align="center" sortable show-overflow-tooltip />
            <el-table-column label="操作" align="center" width="200" sortable show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button>
                    <el-button link type="primary" size="default" :icon="Delete">审批进度</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <Dailogprove ref="Show"></Dailogprove>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
interface User {
    date: string;
    name: string;
    address: string;
}
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
import Dailogprove from './component/Dailogprove.vue';
import { useRouter } from 'vue-router';
export default defineComponent({
    components: { ElButton, ElInput,Dailogprove},
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        const resetForm = (formEl: FormInstance | undefined) => {
            console.log(!formEl);
            if (!formEl) return;
            formEl.resetFields();
        };
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        };

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        const Show=ref()
        const openDai=()=>{
            Show.value.openDailog()
        }
        const router=useRouter()
        const jump=()=>{
       router.push({
           path:"/processForms"
       })
        }
        return {
            ruleForm,
            resetForm,
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Show,
            router,
            jump,
            openDai,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 vite.config.ts

@@ -28,7 +28,7 @@
            open: env.VITE_OPEN,
            proxy: {
                '/gitee': {
                    target: 'https://gitee.com',
                    target: 'https://192.168.0.76:8009',
                    ws: true,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/gitee/, ''),

 yarn.lock

文件太大