应急预案启动记录

13937891274

2022-07-14 5421ae90e2fb0e153037f4a2ca4741de61d04cdd

应急预案启动记录

 src/components/checkTemplate/index.vue

对比新文件
@@ -0,0 +1,172 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择检查模板" width="900px" draggable>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" 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-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            ref="multipleTableRef"
            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>
        <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-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';
interface User {
  date: string
  name: string
  address: string
}
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-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
  .pages{
    /*display: flex;*/
    /*justify-content: flex-end;*/
    margin-top: 15px;
  }
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/components/emergencySupplies/index.vue

对比新文件
@@ -0,0 +1,147 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择应急物资" width="900px" draggable>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
            <el-form-item>
              <el-input size="default" v-model="ruleForm.pass" placeholder="物资名称"  style="max-width: 215px;"/>
            </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-button size="default" :icon="Delete">清除选择</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" prop="date" label="id" />
          <el-table-column align="center" prop="name" label="物资名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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: '',
    });
    // 表格
    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-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages{
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/components/material/index.vue

对比新文件
@@ -0,0 +1,142 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择应急物资" width="900px" draggable>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
            <el-form-item>
              <el-input size="default" v-model="ruleForm.pass" placeholder="物资名称"  style="max-width: 215px;"/>
            </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-button size="default" :icon="Delete">清除选择</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" prop="name" label="物资名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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: '',
    });
    // 表格
    const tableData = [
      {
        name: '应急救援组',
      },
      {
        name: '工艺抢险组',
      },
      {
        name: '后勤保障组',
      },
      {
        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-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages{
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/components/regionsDialog/index.vue

文件名从 src/views/contingencyManagement/panManagement/component/regionsDialog.vue 修改
@@ -7,7 +7,7 @@
                <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" type="primary" @click="submitForm(ruleFormRef)" style="margin-left: 12px;">查询</el-button>
                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
      <el-button size="default" :icon="Delete" style="margin-left: 12px;">清除选择</el-button>

 src/components/userCheckbox/index.vue

对比新文件
@@ -0,0 +1,406 @@
<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: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" class="ml10" @click="onSubmit">
                  查询
                </el-button>
                <el-button size="default" class="ml10" @click="submitReset">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </el-header>
          <el-main style="position: relative;">
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
            >
              <el-table-column type="selection" width="55"/>
              <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
              <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
              <el-table-column  label="状态"
                                width="80"
                                prop="tag"
                                :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                                :filter-method="filterTag"
                                filter-placement="bottom-end">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.tag === 'Home' ? '' : 'success'"
                      disable-transitions
                  >{{ scope.row.tag }}</el-tag
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div style="width: 200px;">
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </el-container>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

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

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


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

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

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

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

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

    // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };

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

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//单选框圆形
//::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
//  display:none
//}
//::v-deep .el-table-column--selection .cell{
//  text-align: center;
//}
//::v-deep .el-checkbox__input .el-checkbox__inner{
//  border-radius: 50%;
//}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/components/userSelections/index.vue

@@ -18,7 +18,7 @@
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container style="margin-right: 15px;min-width:560px;">
        <el-container style="margin: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
@@ -34,28 +34,25 @@
              </el-form-item>
            </el-form>
          </el-header>
          <el-main>
            <el-scrollbar>
          <el-main style="position: relative;">
              <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 align="center" width="55">
                  <template #default="scope">
                    <el-radio-group v-model="radio1" @change="radio">
                      <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属机构" width="110"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
                <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
                <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
                <el-table-column  label="状态"
                                  width="80"
                  prop="tag"
                  width="100"
                  :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
@@ -71,11 +68,33 @@
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div>
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
        <div style="width: 200px;">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
@@ -100,7 +119,7 @@

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

interface Tree {
@@ -108,11 +127,11 @@
  label: string
  children?: Tree[]
}
interface User {
  date: string
  name: string
  address: string
}
// interface User {
//   date: string
//   name: string
//   address: string
// }
export default defineComponent({
  name: 'userSelections',
  components: {
@@ -195,14 +214,43 @@
        ],
      },
    ]
    const item = {
      date: '龚赛健',
      name: '龚赛健',
      address: '综合办公室',
      tag: '正常',
    }
    const tableData = ref(Array.from({ length: 5 }).fill(item))

    // const item = {
    //   date: '孙刚',
    //   name: '龚赛健',
    //   address: '综合办公室',
    //   tag: '正常',
    // }
    // const tableData = ref(Array.from({ length: 7 }).fill(item))
    const tableData = [
      {
        date: '孙刚',
        name: '孙刚',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '谭柏',
        name: '谭柏',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪威',
        name: '倪威',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
      {
        date: '倪玲婕',
        name: '倪玲婕',
        address: '',
        department: '经营班子',
        tag: '正常',
      },
    ];
    // 定义表单搜索
    const formInline = reactive({
      name: '',
@@ -212,25 +260,28 @@
      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 multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const dynamicTags = ref(['胡海涛']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('谭柏')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      openDialog,
@@ -243,12 +294,15 @@
      tableData,
      formInline,
      onSubmit,
      // currentRow,
      // setCurrent,
      multipleTableRef,
      // multipleTableRef,
      handleClose,
      dynamicTags,
      // handleCurrentChange,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      radio1,
      radio,
    };
  },
});
@@ -259,6 +313,7 @@
  color: var(--el-text-color-primary);
  line-height: 32px;
  --el-header-height: 45px;
  padding: 0;
}
.layout-container-demo .el-aside {
  padding: 10px;
@@ -306,6 +361,7 @@
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
@@ -328,4 +384,44 @@
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/abolishDialog/abolishDialog.vue

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

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

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

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

/*弹窗底部边框线*/
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
/*弹窗顶部边框线*/
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

 src/views/contingencyManagement/contingency/index.vue

@@ -73,7 +73,7 @@
        <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">
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
@@ -388,4 +388,24 @@
.el-form .el-form-item:last-of-type{
  margin-bottom: 22px!important;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
</style>

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

对比新文件
@@ -0,0 +1,443 @@
<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>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

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

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

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

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

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

@@ -1,20 +1,6 @@
<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('新建')">
@@ -22,11 +8,11 @@
              <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="warning" plain disabled>-->
<!--            <el-icon>-->
<!--              <Edit />-->
<!--            </el-icon>修改-->
<!--          </el-button>-->
          <el-button size="default" type="danger" plain disabled>
            <el-icon>
              <Delete />
@@ -60,30 +46,29 @@
            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">
        <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="演练记录日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="260" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
            <el-button size="small" text type="primary" @click="onOpenEdit(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-button size="small" text type="primary" @click="onOpenEdit(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-button 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>
@@ -93,21 +78,7 @@
          </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>
@@ -128,19 +99,18 @@
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  // Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  // View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/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';

// 定义表格数据类型
@@ -175,12 +145,11 @@
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    // View,
    EditPen,
    Plus,
    Edit,
    // Edit,
    Delete,
    Upload,
    Download,
@@ -190,7 +159,7 @@
    UpData
  },
  setup() {
    const seeRef = ref();
    // const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
@@ -262,10 +231,6 @@
        teamLeader: '王磊',
      }
    ]
    //查看用户弹窗
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
@@ -287,18 +252,6 @@
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    return {
      // value,
      // options,
@@ -307,16 +260,13 @@
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      // onOpenSee, //查看
      // seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});

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

对比新文件
@@ -0,0 +1,214 @@
<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="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练名称" prop="teamName">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="regionsDialog"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="实际到场人员" prop="telephone" >
              <el-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="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练过程描述" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写演练目的"
                  class="textarea"
                  type="textarea"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练记录人" prop="telephone" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练记录时间" prop="telephone">
              <el-date-picker
                  class="w100"
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
              />
            </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>
    <UserSelect ref="Shows"/>
    <UserCheckbox ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

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

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

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

export default defineComponent({
  name: 'openAdd',
  components: {
    UserSelect,
    UserCheckbox,
    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 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.openDialog()
    }
    // 演练名称弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 实际到场人员弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      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%;
}
.textarea{
  height: 90px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 90px!important;
}
</style>

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

对比新文件
@@ -0,0 +1,157 @@
<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="margin-left: 12px;">查询</el-button>
                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
      <el-button size="default" :icon="Delete" style="margin-left: 12px;">清除选择</el-button>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-top:20px;">
      <el-table-column type="selection" width="55" />
            <el-table-column align="center" prop="name" label="演练名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30]"
              :pager-count="5"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="40"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
        </el-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 pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['应急救援组', '工艺抢险组', '后勤保障组']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
.el-form--inline .el-form-item{
  margin: 0;
}
/*分页开始*/
  .pages{
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
  }
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
/*分页结束*/
</style>

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

对比新文件
@@ -0,0 +1,427 @@
<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: 0 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="default" type="primary" class="ml10" @click="onSubmit">
                  查询
                </el-button>
                <el-button size="default" class="ml10" @click="submitReset">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </el-header>
          <el-main style="position: relative;">
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
            >
              <el-table-column align="center" width="55">
                <template #default="scope">
                  <el-radio-group v-model="radio1" @change="radio">
                    <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
              <el-table-column prop="address" label="所属机构" width="115"  show-overflow-tooltip sortable />
              <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
              <el-table-column  label="状态"
                                width="80"
                                prop="tag"
                                :filters="[
                     { text: '正常', value: 'Home' },
                     { text: '不正常', value: 'Office' },
                   ]"
                                :filter-method="filterTag"
                                filter-placement="bottom-end">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.tag === 'Home' ? '' : 'success'"
                      disable-transitions
                  >{{ scope.row.tag }}</el-tag
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pages">
              <el-pagination
                  v-model:currentPage="pageIndex"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30]"
                  :pager-count="5"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
        <div style="width: 200px;">
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              style="margin: 5px"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-container>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
          <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

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

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


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

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

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

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

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

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

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

}
::-webkit-scrollbar-thumb {
  background-color: transparent;
}
// 鼠标悬浮样式
:hover::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #d8d9db;
}
::v-deep .el-input__wrapper{
  width: 215px;
}
::v-deep .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
/*分页*/
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  align-items: center;
  //position: absolute;
  //bottom: 0;
}
::v-deep .el-pagination{
  width: 100%;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

@@ -1,20 +1,6 @@
<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('新建')">
@@ -22,11 +8,11 @@
              <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="warning" plain disabled>-->
<!--            <el-icon>-->
<!--              <Edit />-->
<!--            </el-icon>修改-->
<!--          </el-button>-->
          <el-button size="default" type="danger" plain disabled>
            <el-icon>
              <Delete />
@@ -60,29 +46,31 @@
            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">
        <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="演练记录时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="260" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
            <el-button size="small" text type="primary" @click="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-button 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-button 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 size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
@@ -93,19 +81,21 @@
          </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>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
@@ -128,17 +118,16 @@
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
  // Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/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';
@@ -177,10 +166,9 @@
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    // Edit,
    Delete,
    Upload,
    Download,
@@ -287,18 +275,17 @@
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      // value,
      // options,
@@ -314,9 +301,10 @@
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
    };
  },
});
@@ -335,4 +323,39 @@
  flex-direction: row;
  justify-content: space-between;
}
//分页开始
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
//分页结束
</style>

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

对比新文件
@@ -0,0 +1,448 @@
<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="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="主办部门"  placeholder="请选择">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练方式" prop="teamLevel">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="综合" value="admin"></el-option>
                <el-option label="桌面" value="common3"></el-option>
                <el-option label="专项" value="common2"></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="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练级别" prop="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="common1"></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-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划演练日期" prop="teamPhone">
              <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="teamPhone">
              <el-date-picker v-model="editDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="teamPhone">
              <el-input v-model="ruleForm.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="制定部门" prop="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-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="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练目的" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写演练目的"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练负责人" prop="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="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="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="备注信息" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写备注信息"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
            <el-form-item label="预案附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary"
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-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>
    <RegionsDialog ref="Shows"/>
    <UserCheckbox ref="userRef"/>
  </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 UserCheckbox from "/@/components/userCheckbox/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        planCustomizer: '胡海涛', //计划定制人
        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 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 userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 计划定制日期
    const datetime = ref('')
    // 计划演练日期
    const drillDate = ref('')
    // 修改时间
    const editDate = ref('')

    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      datetime,
      drillDate,
      editDate,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
//多行文本框
.textarea{
  height: 70px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 70px!important;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.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="请填写演练名称" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练地点" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写演练地点" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="主办部门"  placeholder="请选择" >
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"
                  disabled
              />
            </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="请选择" disabled>
                <el-option label="综合" value="admin"></el-option>
                <el-option label="桌面" value="common3"></el-option>
                <el-option label="专项" value="common2"></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"
                  disabled
              >
                <template #append>
                  <el-button :icon="Search" disabled @click="daiInpt" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练级别" prop="teamPhone">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择" disabled>
                <el-option label="公司级" value="admin"></el-option>
                <el-option label="分厂级" value="common"></el-option>
                <el-option label="车间级" value="common1"></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-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划演练日期" prop="teamPhone">
              <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="teamPhone">
              <el-date-picker v-model="editDate" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="teamPhone">
              <el-input v-model="ruleForm.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="制定部门" prop="telephone">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择" disabled/>
            </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"
                  disabled
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" disabled/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="演练目的" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写演练目的"
                  class="input-with-select textarea"
                  type="textarea"
                  disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练负责人" prop="telephone" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
                  disabled
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" disabled/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="保险措施" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练经费" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="备注信息" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写备注信息"
                  class="input-with-select textarea"
                  type="textarea"
                  disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
            <el-form-item label="预案附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
                  disabled
              >
                <el-button type="primary" disabled
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
                </span>
      </template>
    </el-dialog>
    <RegionsDialog ref="Shows"/>
    <UserCheckbox ref="userRef"/>
  </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 UserCheckbox from "/@/components/userCheckbox/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"

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

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      planCustomizer: '胡海涛', //计划定制人
      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 Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 计划定制日期
    const datetime = ref('')
    // 计划演练日期
    const drillDate = ref('')
    // 修改时间
    const editDate = ref('')

    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      // rules,
      openUser,
      userRef,
      datetime,
      drillDate,
      editDate,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
//多行文本框
.textarea{
  height: 70px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 70px!important;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

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

对比新文件
@@ -0,0 +1,171 @@
<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 align="center" width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1" @change="radio">
                <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="预案名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30]"
              :pager-count="5"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="40"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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 pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    // 右方点击添加后显示标签
    const dynamicTags = ref(['LNG储罐单元']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('LNG装车区')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }
    return {
      dialogVisible,
      openDailog,
      ruleForm,
      tableData,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      Delete,
      handleClose,
      radio1,
      radio,
      dynamicTags,
    };
  },
});
</script>
<style scoped>
.el-row {
  padding: 0 0 20px 0;
}
.el-form--inline .el-form-item{
  margin: 0;
}
/*分页*/
  .pages{
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
  }
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

@@ -1,20 +1,6 @@
<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('新建')">
@@ -22,11 +8,11 @@
              <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="warning" plain disabled>-->
<!--            <el-icon>-->
<!--              <Edit />-->
<!--            </el-icon>修改-->
<!--          </el-button>-->
          <el-button size="default" type="danger" plain disabled>
            <el-icon>
              <Delete />
@@ -60,30 +46,28 @@
            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 prop="name" label="演练名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="place" label="演练地点" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="mode" label="演练方式" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="level" label="演练级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="date" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="editDate" 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="onOpenSee(scope.row)">
            <el-button size="small" text type="primary" @click="releaseOfDrillPlan(0)">
              <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-button size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
                <View />
              </el-icon>查看
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
            <el-button size="small" text type="primary" @click="onOpenSee(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>
@@ -93,23 +77,24 @@
          </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>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <OpenSee ref="seeRef" />
    <upData ref="upShow"></upData>
  </div>
</template>
@@ -127,33 +112,30 @@
  ElMessage,
  ElTable,
} from 'element-plus';
import { Plus,
  Edit,
import {
  Plus,
  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 {useRouter} from "vue-router"
import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue';
import OpenSee from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';

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

  date: string;
  editDate: string
}

// 定义接口来定义对象的类型
@@ -176,22 +158,17 @@
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    EditPen,
    Plus,
    Edit,
    View,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
@@ -210,70 +187,51 @@
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        name: '应急救援组',
        place: '公司',
        mode: '实施抢险抢险的应急方案和措施实施 ；',
        level: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        date: '2022-06-22 16:31:59',
        editDate: '2022-06-22 16:31:59'
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        name: '应急救援组',
        place: '公司',
        mode: '实施抢险抢险的应急方案和措施实施 ；',
        level: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        date: '2022-06-22 16:31:59',
        editDate: '2022-06-22 16:31:59'
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        name: '应急救援组',
        place: '公司',
        mode: '实施抢险抢险的应急方案和措施实施 ；',
        level: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        date: '2022-06-22 16:31:59',
        editDate: '2022-06-22 16:31:59'
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        name: '应急救援组',
        place: '公司',
        mode: '实施抢险抢险的应急方案和措施实施 ；',
        level: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        date: '2022-06-22 16:31:59',
        editDate: '2022-06-22 16:31:59'
      }
    ]
    //查看用户弹窗
    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 seeRef = ref();
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
@@ -287,36 +245,45 @@
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    // 启动跳转
    const router=useRouter()
    const releaseOfDrillPlan=(data:string)=>{
      router.push({
        path:"/releaseOfDrillStart",
        query:{
          type:data
        }
      })
    }
    return {
      // value,
      // options,
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      onOpenSee,  //查看
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
      View ,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      router,
      releaseOfDrillPlan,
    };
  },
});
@@ -335,4 +302,38 @@
  flex-direction: row;
  justify-content: space-between;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,164 @@
<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="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急预案" prop="teamName">
              <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="12" :sm="12" :md="12" :lg="12" :xl="12" 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-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" @click="onCancel">关闭</el-button>
                </span>
      </template>
    </el-dialog>
    <userSelections ref="userRef"/>
    <AddEmergencyPersonnel ref="addRef" />
    <EditEmergencyPersonnel ref="editRef" />
  </div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  ref,
  defineComponent
} from 'vue';
import type {
  FormInstance,
} 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 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 userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };

    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      state.ruleForm = row;
      state.isShowDialog = true;
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      Search,
      ruleFormRef,
      openUser,
      userRef,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 50px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 50px!important;
}
</style>

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

对比新文件
@@ -0,0 +1,176 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择应急预案" width="900px" draggable>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
              <el-form-item>
                <el-input size="default" v-model="ruleForm.pass" placeholder="预案名称"  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-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
          <el-table-column width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1" @change="radio">
                <el-radio :label="scope.row.pass" size="large">{{null}}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pass" label="预案名称" />
          <el-table-column align="center" prop="checkPass" label="预案类型"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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 = [
      {
        pass: '生产安全事故应急预案202102',
        checkPass: '1',
      },
      {
        pass: '生产安全事故应急预案',
        checkPass: '2',
      },
      {
        pass: '作业人员触电事故现场处置方案',
        checkPass: '4',
      },
      {
        pass: '船舶碰撞码头事故专项应急预案',
        checkPass: '2',
      },
    ];
    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);
      radio1.value=""
    };
    const radio1=ref('生产安全事故应急预案202102')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }
    return {
      dialogVisible,
      openDailog,
      ruleForm,
      tableData,
      pageSize4,
      handleSizeChange,
      handleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      radio1,
      radio,
    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages{
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyPlanStartRecord/index.vue

@@ -2,26 +2,34 @@
  <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>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="ruleForm.teamLeader"
                placeholder="请选择应急预案"
                class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" @click="daiInpt"/>
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
            重置
          </el-button>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain disabled>
            <el-icon>
              <Edit />
@@ -34,11 +42,6 @@
          </el-button>
        </div>
        <div class="button_Right">
          <el-button @click="upButton">
            <el-icon>
              <Upload />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Download />
@@ -60,30 +63,16 @@
            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">
        <el-table-column prop="teamName" label="应急预案" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="启动人"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="启动时间"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="materialClassification" label="备注" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
            <el-button :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)">
              发起审批
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
              <el-icon>
@@ -93,23 +82,24 @@
          </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>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <SelectEmergencyPlan ref="showRef"/>
    <OpenSee ref="editRef" />
    <upData ref="upShow"></upData>
  </div>
</template>
@@ -117,7 +107,7 @@
<script lang="ts">
import {
  // toRefs,
  // reactive,
  reactive,
  // onMounted,
  ref,
  defineComponent
@@ -126,71 +116,59 @@
  ElMessageBox,
  ElMessage,
  ElTable,
  FormInstance,
} from 'element-plus';
import { Plus,
  Edit,
import {
  Plus,
  Search,
  Delete,
  Upload,
  // 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 OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import SelectEmergencyPlan from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue'

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

  materialClassification: 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,
    // Edit,
    Delete,
    Upload,
    SelectEmergencyPlan,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    });
    // const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
@@ -210,71 +188,44 @@
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
      }
    ]
    //查看用户弹窗
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
    // // 打开新增用户弹窗
    // const addRef = ref();
    // const onOpenAdd = () => {
    //   addRef.value.openDialog();
    // };
    // // 打开修改用户弹窗
    const OnOpenSee = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 应急预案
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
@@ -287,18 +238,17 @@
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      // value,
      // options,
@@ -307,15 +257,18 @@
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      OnOpenSee,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      ruleFormRef,
      ruleForm,
      Search,
      daiInpt,
      showRef,
      // ...toRefs(state),
    };
  },
@@ -335,4 +288,58 @@
  flex-direction: row;
  justify-content: space-between;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,182 @@
<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.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="保养结果" prop="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-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-date-picker
                  class="w100"
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
              />
            </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>
    <Material ref="showRef"/>
    <userSelections ref="userRef"/>
  </div>
</template>

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

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

import {
  Search
} from '@element-plus/icons-vue'
import Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"

export default defineComponent({
  name: 'openAdd',
  components: {
    UserSelections,
    Material,
  },
  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 submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      daiInpt,
      showRef,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
</style>

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

@@ -2,22 +2,35 @@
  <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>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="ruleForm.teamLeader"
                placeholder="请选择应急物资"
                class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" @click="daiInpt"/>
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
            重置
          </el-button>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
@@ -34,11 +47,6 @@
          </el-button>
        </div>
        <div class="button_Right">
          <el-button @click="upButton">
            <el-icon>
              <Upload />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Download />
@@ -60,30 +68,15 @@
            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">
        <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="保养结果"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="保养日期"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
            <el-button 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)">
              发起审批
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
              <el-icon>
@@ -93,31 +86,33 @@
          </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>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <EmergencySupplies ref="showRef"/>
    <OpenSee ref="editRef" />
    <upData ref="upShow"></upData>
    <OpenAdd ref="addRef" />
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  reactive,
  // onMounted,
  ref,
  defineComponent
@@ -126,79 +121,65 @@
  ElMessageBox,
  ElMessage,
  ElTable,
  FormInstance,
} from 'element-plus';
import { Plus,
  Edit,
import {
  Plus,
  Search,
  Delete,
  Upload,
  Edit,
  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 OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';

import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue';
// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  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',
  name: 'index',
  components: {
    OpenAdd,
    OpenSee,
    OpenEdit,
    View,
    OpenAdd,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    EmergencySupplies,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    });

    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

@@ -210,71 +191,40 @@
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部'
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      }
    ]
    //查看用户弹窗
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
    // // 打开新增用户弹窗
    // const addRef = ref();
    // const onOpenAdd = () => {
    //   addRef.value.openDialog();
    // };
    // // 打开修改用户弹窗
    const OnOpenSee = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
@@ -287,18 +237,17 @@
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      // value,
      // options,
@@ -307,16 +256,21 @@
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      OnOpenSee,  //编辑
      editRef,
      Edit,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      ruleFormRef,
      ruleForm,
      Search,
      daiInpt,
      showRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
@@ -335,4 +289,58 @@
  flex-direction: row;
  justify-content: space-between;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,193 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择岗位id" width="900px" draggable>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
              <el-form-item>
                <el-input size="default" v-model="ruleForm.pass" placeholder="编号"  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-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            ref="multipleTableRef"
            style="width: 100%;margin-top:20px"
        >
          <el-table-column align="center" width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1" @change="radio">
                <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="date" label="编号" />
          <el-table-column align="center" prop="name" label="姓名"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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';
interface User {
  date: string
  name: string
  address: string
}
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);
      radio1.value=""
    };
    const radio1=ref('金伟')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }
    return {
      dialogVisible,
      openDailog,
      ruleForm,
      tableData,
      pageSize4,
      handleSizeChange,
      handleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      radio1,
      radio,
    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages{
  /*display: flex;*/
  /*justify-content: flex-end;*/
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,467 @@
<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-input v-model="ruleForm.responsibleDepartment" placeholder="请填写物资编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="物资用途" prop="teamLeader">
              <el-input v-model="ruleForm.teamLeader" placeholder="请填写物资用途"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="所属区域" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="regionsDialog"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="物资型号" prop="teamPhone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写物资型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责部门" prop="telephone" >
              <el-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-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-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.teamPhone" placeholder="请填写存放位置"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="存储数量" prop="telephone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写存储数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="生产日期" prop="telephone">
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="使用期限(天)" prop="telephone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写使用期限"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="物资状态" prop="telephone">
              <el-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="telephone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写使用期限"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="投用日期" prop="telephone">
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="使用说明" prop="telephone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写使用说明"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="检查日期" prop="telephone">
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="下次检查日期" prop="telephone">
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="经度（度）" prop="telephone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写经度（度）"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="纬度（度）" prop="telephone">
              <el-input v-model="ruleForm.teamPhone" placeholder="请填写纬度（度）"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-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>
    <PersonInCharge ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsCheckbox ref="openRef"/>
  </div>
</template>

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

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

import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import PersonInCharge from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue'
import RegionsCheckbox from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue'

export default defineComponent({
  name: 'openAdd',
  components: {
    PersonInCharge,
    UserSelections,
    RegionsCheckbox,
  },
  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 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,
      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/emergencyResources/emergencySupplies/component/personInCharge.vue

对比新文件
@@ -0,0 +1,193 @@
<template>
  <el-dialog v-model="dialogVisible" title="选择岗位id" width="900px" draggable>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
              <el-form-item>
                <el-input size="default" v-model="ruleForm.pass" placeholder="编号"  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-col>
          <el-col :span="24">
            <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            ref="multipleTableRef"
            style="width: 100%;margin-top:20px"
        >
          <el-table-column align="center" width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1" @change="radio">
                <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="date" label="编号" />
          <el-table-column align="center" prop="name" label="姓名"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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';
interface User {
  date: string
  name: string
  address: string
}
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);
      radio1.value=""
    };
    const radio1=ref('金伟')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }
    return {
      dialogVisible,
      openDailog,
      ruleForm,
      tableData,
      pageSize4,
      handleSizeChange,
      handleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      radio1,
      radio,
    };
  },
});
</script>
<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 0;
  margin-right: 0;
}
/*分页*/
.pages{
  /*display: flex;*/
  /*justify-content: flex-end;*/
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,138 @@
<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="margin-left: 12px;">查询</el-button>
            <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
          <el-button size="default" :icon="Delete" style="margin-left: 12px;">清除选择</el-button>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-top:20px;">
          <el-table-column align="center" width="55">
          <template #default="scope">
            <el-radio-group v-model="radio1" @change="radio">
              <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
            </el-radio-group>
          </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="风险区域名称"/>
        </el-table>
        <div class="pages">
          <el-pagination
              v-model:currentPage="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30]"
              :pager-count="5"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="40"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-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 dynamicTags = ref(['LNG装车区']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      radio1.value=""
    };
    const radio1=ref('1#LNG储罐单元')
    const radio=(event:any)=>{
      dynamicTags.value[0]=event
    }

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      dialogVisible,
      openDailog,
      ruleForm,
      tableData,
      handleSizeChange,
      handleCurrentChange,
      pageIndex,
      pageSize,
      radio1,
      radio,
      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/emergencyResources/emergencySupplies/index.vue

@@ -2,12 +2,7 @@
  <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-input size="default" placeholder="物资名称" style="max-width: 215px;"> </el-input>
        <el-button size="default" type="primary" class="ml10">
          查询
        </el-button>
@@ -39,11 +34,11 @@
              <Upload />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Download />
            </el-icon>
          </el-button>
          <!--          <el-button>-->
          <!--            <el-icon>-->
          <!--              <Download />-->
          <!--            </el-icon>-->
          <!--          </el-button>-->
          <el-button>
            <el-icon>
              <Refresh />
@@ -60,30 +55,33 @@
            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">
        <el-table-column prop="teamName" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="物资编号"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="负责部门"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="materialClassification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="location" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="number" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
              <el-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-button size="small" text type="primary" @click="onMaintain(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
              </el-icon>保养
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
              发起审批
            <el-button size="small" text type="primary" @click="onMaintain(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>检查
            </el-button>
            <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
            <el-button  size="small" text type="primary" @click="onOpenEdit(scope.row)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon> 修改
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
              <el-icon>
@@ -93,21 +91,23 @@
          </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>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenSee ref="seeRef" />
    <MaintainDialog ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
@@ -131,16 +131,14 @@
  Edit,
  Delete,
  Upload,
  Download,
  // Download,
  Refresh,
  View,
  VideoPause,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
import MaintainDialog from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintainDialog.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';

// 定义表格数据类型
@@ -148,12 +146,9 @@
  teamName: string
  teamLevel: string
  teamDescription: string
  teamPhone: string
  phone: string;
  describe: string;
  responsibleDepartment: string
  teamLeader: string

  location: string;
  materialClassification: string
  number: string
}

// 定义接口来定义对象的类型
@@ -175,7 +170,7 @@
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    MaintainDialog,
    OpenEdit,
    View,
    EditPen,
@@ -183,15 +178,11 @@
    Edit,
    Delete,
    Upload,
    Download,
    // Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
@@ -210,61 +201,42 @@
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
        location: '3#岗微型消防站',
        number: '5',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
        location: '3#岗微型消防站',
        number: '5',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
        location: '3#岗微型消防站',
        number: '5',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
        materialClassification: '事故气体吸收装置',
        location: '3#岗微型消防站',
        number: '5',
      }
    ]
    //查看用户弹窗
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    const seeRef = ref();
    const onMaintain = (row: TableDataRow) => {
      seeRef.value.openDailog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
@@ -272,6 +244,7 @@
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const editRef = ref();
    const onOpenEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
@@ -299,6 +272,17 @@
    // onMounted(() => {
    //   initTableData();
    // });
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      // value,
      // options,
@@ -307,15 +291,17 @@
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      onMaintain, //保养
      seeRef,
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      // ...toRefs(state),
    };
  },
@@ -335,4 +321,38 @@
  flex-direction: row;
  justify-content: space-between;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

对比新文件
@@ -0,0 +1,182 @@
<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.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="daiInpt"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="保养结果" prop="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-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-date-picker
                  class="w100"
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
              />
            </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>
    <Material ref="showRef"/>
    <userSelections ref="userRef"/>
  </div>
</template>

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

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

import {
  Search
} from '@element-plus/icons-vue'
import Material from '/@/components/material/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"

export default defineComponent({
  name: 'openAdd',
  components: {
    UserSelections,
    Material,
  },
  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 submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      Search,
      ruleForm,
      value1,
      daiInpt,
      showRef,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
</style>

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

@@ -2,22 +2,35 @@
  <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>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="ruleForm.teamLeader"
                placeholder="请选择应急物资"
                class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" @click="daiInpt"/>
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
            重置
          </el-button>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd('新建')">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
@@ -34,11 +47,6 @@
          </el-button>
        </div>
        <div class="button_Right">
          <el-button @click="upButton">
            <el-icon>
              <Upload />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Download />
@@ -60,30 +68,15 @@
            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">
        <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="保养结果"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamDescription" label="保养日期"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
            <el-button 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)">
              发起审批
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
              <el-icon>
@@ -93,31 +86,33 @@
          </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>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenSee ref="seeRef" />
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
    <EmergencySupplies ref="showRef"/>
    <OpenSee ref="editRef" />
    <upData ref="upShow"></upData>
    <OpenAdd ref="addRef" />
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  // reactive,
  reactive,
  // onMounted,
  ref,
  defineComponent
@@ -126,79 +121,65 @@
  ElMessageBox,
  ElMessage,
  ElTable,
  FormInstance,
} from 'element-plus';
import { Plus,
  Edit,
import {
  Plus,
  Search,
  Delete,
  Upload,
  Edit,
  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 OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';

import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue';
// 定义表格数据类型
interface User {
  teamName: string
  teamLevel: string
  teamDescription: string
  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,
    OpenAdd,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    EmergencySupplies,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    UpData
  },
  setup() {
    const seeRef = ref();
    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    });

    const editRef = ref();
    // 选择框
    // const value = ref('');
    // const options =
    //   {
    //     value: 'Option1',
    //     label: 'Option1',
    //   };
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])

@@ -210,71 +191,40 @@
    // 定义表格数据
    const tableData: User[] = [
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部'
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      },
      {
        teamName: '应急救援组',
        teamLevel: '公司',
        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
        teamPhone: '051383830321',
        phone: '13603812900',
        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
        responsibleDepartment: '仪表班',
        teamLeader: '王磊',
        teamName: '消防安全绳',
        teamLevel: 'YJWZ20210208104332',
        teamDescription: '安全管理部',
      }
    ]
    //查看用户弹窗
    const onOpenSee = (row: TableDataRow) => {
      seeRef.value.openDialog(row);
    };
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
    // // 打开新增用户弹窗
    // const addRef = ref();
    // const onOpenAdd = () => {
    //   addRef.value.openDialog();
    // };
    // // 打开修改用户弹窗
    const OnOpenSee = (row: TableDataRow) => {
      editRef.value.openDialog(row);
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
@@ -287,18 +237,17 @@
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      // value,
      // options,
@@ -307,16 +256,21 @@
      upButton,
      upShow,
      tableData,
      onOpenSee, //查看
      seeRef,
      onOpenEdit,  //编辑
      OnOpenSee,  //编辑
      editRef,
      Edit,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      ruleFormRef,
      ruleForm,
      Search,
      daiInpt,
      showRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
    };
  },
});
@@ -335,4 +289,58 @@
  flex-direction: row;
  justify-content: space-between;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

文件已删除

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

对比新文件
@@ -0,0 +1,223 @@
<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="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-top: 15px;"
                    ref="multipleTableRef"
                    :model="formInline"
                    :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
                >
                  <el-table-column prop="jobNo" 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 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-col>
        </el-row>
      </el-form>
      <div class="pages">
<!--      <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-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

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

import {
  Search
} from '@element-plus/icons-vue'
// 定义表格数据类型
interface User {
  personnelName: string
  jobNo: string
  phone: string;
  position: string;
}
// 定义表单搜索
const formInline = reactive({
  pageIndex: 1,
  pageSize: 10,
  searchParams: {
    teamName: "",
    teamType: "",
  }
})
export default defineComponent({
  name: 'abolishLibrary',
  components: {

  },
  setup() {
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   formInline.pageSize = val;
    // };
    // const onHandleCurrentChange = (val: number) => {
    //   formInline.pageIndex = val;
    // };
    //定义表格数据
    const multipleSelection = ref<User[]>([])
    const tableData: User[] = []

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      tableData,
      multipleSelection,
      Search,
      ruleFormRef,
      // submitForm,
      userRef,
      openUser,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      formInline,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

文件已删除

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

文件已删除

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

文件已删除

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

@@ -74,19 +74,17 @@
            <el-form-item label="编写部门" prop="telephone">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  :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"
                  class="w100"
                  placeholder="选择日期时间"
              />
            </el-form-item>
@@ -144,14 +142,15 @@
                </span>
      </template>
    </el-dialog>
    <DailogSearch ref="Shows"/>
    <CheckTemplate ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

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

export default defineComponent({
  name: 'openAdd',
  components: {
    DailogSearch,
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },

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

@@ -1,34 +1,51 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="查看应急队伍管理"
        title="新建应急演练计划发布"
        v-model="isShowDialog"
        width="769px"
        draggable
    >
      <el-form :model="ruleForm" size="default" label-width="90px">
      <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="队伍名称">
              <el-input v-model="ruleForm.teamName" :disabled="true"></el-input>
            <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="队伍级别">
              <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-form-item label="演练地点" prop="teamName">
              <el-input v-model="ruleForm.teamName" placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="主办部门"  placeholder="请选择">
              <el-tree-select
                  v-model="ruleForm.responsibleDepartment"
                  :data="data" class="w100"
                  placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练方式" prop="teamLevel">
              <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                <el-option label="综合" value="admin"></el-option>
                <el-option label="桌面" value="common3"></el-option>
                <el-option label="专项" value="common2"></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-form-item label="应急预案" prop="telephone" @click="daiInpt" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="Please input"
                  placeholder="请选择"
                  class="input-with-select"
                  :disabled="true"
              >
                <template #append>
                  <el-button :icon="Search"/>
@@ -37,34 +54,109 @@
            </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 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="common1"></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.teamPhone" :disabled="true"></el-input>
            <el-form-item label="计划定制日期" prop="teamPhone">
              <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="固定电话">
              <el-input v-model="ruleForm.telephone" :disabled="true"></el-input>
            <el-form-item label="计划演练日期" prop="teamPhone">
              <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="修改时间" prop="teamPhone">
              <el-date-picker v-model="editDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="计划定制人" prop="teamPhone">
              <el-input v-model="ruleForm.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="制定部门" prop="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-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="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 label="演练目的" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写演练目的"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="演练负责人" prop="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="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="teamName">
              <el-input v-model="ruleForm.teamName" 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-form-item label="备注信息" prop="telephone">
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请填写备注信息"
                  class="input-with-select textarea"
                  type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
            <el-form-item label="预案附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary" disabled
                <el-button type="primary"
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
@@ -74,165 +166,146 @@
              </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>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
<!--    <AddTeamLeader ref="addRef" />-->
    <RegionsDialog ref="Shows"/>
    <UserSelections ref="userRef"/>
  </div>
</template>

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

import type {
  UploadUserFile,
  TabsPaneContext,
  FormInstance,
  // FormRules,
} 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
// }
import UserSelections from "/@/components/userSelections/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"

export default defineComponent({
  name: 'openSee',
  name: 'openAdd',
  components: {
    // Search,
    RegionsDialog,
    UserSelections,
  },
  setup() {
    const state = reactive<UserState>({
      isShowDialog: false,
      ruleForm: {
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
        describe: '', // 队伍描述
      },
      deptData: [], // 部门数据
    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = reactive({
      teamName: '', // 队伍名称
      planCustomizer: '胡海涛', //计划定制人
      teamLeader: '', //队伍负责人
      department: [], // 负责人部门
      phone: '', // 负责人手机
      telephone: '', // 固定电话
    });
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      state.ruleForm = row;
      state.isShowDialog = true;
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
      isShowDialog.value = 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 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 = [
@@ -280,63 +353,58 @@
        ],
      },
    ]
    //定义tabs切换
    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    // 表单提交验证必填项
    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 userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 计划定制日期
    const datetime = ref('')
    // 计划演练日期
    const drillDate = ref('')
    // 修改时间
    const editDate = ref('')

    //定义表格数据
    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,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      activeName,
      handleClick,
      tableData,
      multipleSelection,
      Search,
      // addRef,
      // onAddTeamLeader,
      ...toRefs(state),
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      datetime,
      drillDate,
      editDate,
    };
  },
});
@@ -351,4 +419,30 @@
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
//多行文本框
.textarea{
  height: 70px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 70px!important;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

 src/views/contingencyManagement/panManagement/index.vue

@@ -33,7 +33,7 @@
              <Delete />
            </el-icon>删除
          </el-button>
          <el-button size="default" type="primary"  @click="onOpenAdd">
          <el-button size="default" type="primary"  @click="onabolishLibrary">
            废止库
          </el-button>
        </div>
@@ -68,24 +68,24 @@
        <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">
        <el-table-column label="操作" width="260" align="center" fixed="right">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="dialogFormVisible = true">
            <el-button 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-button size="small" text type="primary" @click="abolish(0)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
            <el-button size="small" text type="primary" @click="jumpFrom(0)">
              <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  size="small" text type="primary" @click="abolish(0)">
             发起审批
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">
@@ -109,9 +109,24 @@
      <!--          :total="tableData.total"-->
      <!--      >-->
      <!--      </el-pagination>-->
      <div class="pages">
        <el-pagination
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
<!--    <OpenSee ref="seeRef" />-->
    <OpenAdd ref="addRef" />
    <AbolishLibrary ref="abolishRef"/>
    <OpenEdit ref="editRef" />
    <upData ref="upShow"></upData>
    <el-dialog v-model="dialogFormVisible" width="30%" title="启动">
@@ -145,6 +160,7 @@
  ElMessage,
  ElTable,
} from 'element-plus';
import {useRouter} from "vue-router"
import { Plus,
  Edit,
  Delete,
@@ -157,8 +173,8 @@
  EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
import AbolishLibrary from '/@/views/contingencyManagement/panManagement/component/abolishLibrary.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';

// 定义表格数据类型
@@ -193,7 +209,7 @@
  name: 'systemUser',
  components: {
    OpenAdd,
    OpenSee,
    AbolishLibrary,
    OpenEdit,
    View,
    EditPen,
@@ -280,10 +296,6 @@
        teamLeader: '王磊',
      }
    ]
    //查看用户弹窗
    // const onOpenSee = (row: TableDataRow) => {
    //   seeRef.value.openDialog(row);
    // };
    // 启动弹窗
    const dialogTableVisible = ref(false)
    const dialogFormVisible = ref(false)
@@ -294,6 +306,11 @@
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog();
    };
    //打开废止库弹窗
    const abolishRef = ref();
    const onabolishLibrary = () => {
      abolishRef.value.openDialog();
    };
    // 打开修改用户弹窗
    const onOpenEdit = (row: TableDataRow) => {
@@ -311,18 +328,41 @@
          })
          .catch(() => {});
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   state.tableData.param.pageSize = val;
    // };
    // // 分页改变
    // const onHandleCurrentChange = (val: number) => {
    //   state.tableData.param.pageNum = val;
    // };
    // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };

    const router=useRouter()
    // 修改跳转
    const jumpFrom=(data:string)=>{
      router.push({
        path:"/processForm",
        query:{
          type:data
        }
      })
    }
    // 发起审批跳转
    const abolish=(data:string)=>{
      router.push({
        path:"/abolishDialog",
        query:{
          type:data
        }
      })
    }
    return {
      // value,
      // options,
@@ -331,7 +371,6 @@
      upButton,
      upShow,
      tableData,
      // onOpenSee, //查看
      dialogTableVisible,
      dialogFormVisible,
      form,
@@ -339,8 +378,17 @@
      onOpenEdit,  //编辑
      editRef,
      onOpenAdd,  //新增
      onabolishLibrary,
      addRef,
      abolishRef,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      jumpFrom,
      abolish,
      router,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      // ...toRefs(state),
@@ -386,4 +434,47 @@
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

 src/views/contingencyManagement/processForm/processForm.vue

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

/*弹窗底部边框线*/
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
/*弹窗顶部边框线*/
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

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

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

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

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

对比新文件
@@ -0,0 +1,440 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="演练名称">
                    <el-input v-model="form.name" placeholder="请填写预案名称" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="演练地点">
          <el-input v-model="form.teamName" placeholder="请填写演练地点" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="主办部门">
          <el-tree-select
              v-model="form.responsibleDepartment"
              :data="data" class="w100"
              placeholder="请选择"
              disabled
          />
                </el-form-item>
            </el-col>
            <el-col :span="12">
        <el-form-item label="演练方式" prop="teamLevel">
          <el-select v-model="form.teamLevel" class="w100" placeholder="请选择" disabled>
            <el-option label="综合" value="admin"></el-option>
            <el-option label="桌面" value="common3"></el-option>
            <el-option label="专项" value="common2"></el-option>
          </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
        <el-form-item label="应急预案" prop="telephone" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" @click="daiInpt" disabled/>
            </template>
          </el-input>
        </el-form-item>
            </el-col>
            <el-col :span="12">
        <el-form-item label="演练级别" prop="teamPhone">
          <el-select v-model="form.teamLevel" class="w100" placeholder="请选择" disabled>
            <el-option label="公司级" value="admin"></el-option>
            <el-option label="分厂级" value="common"></el-option>
            <el-option label="车间级" value="common1"></el-option>
          </el-select>
        </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
        <el-form-item label="计划定制日期" prop="teamPhone">
          <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
        </el-form-item>
            </el-col>
      <el-col :span="12">
        <el-form-item label="计划演练日期" prop="teamPhone">
          <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
        </el-form-item>
      </el-col>
        </el-row>
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="修改时间" prop="teamPhone">
          <el-date-picker v-model="editDate" class="w100" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="计划定制人" prop="teamPhone">
          <el-input v-model="form.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="制定部门" prop="telephone">
          <el-tree-select
              v-model="form.responsibleDepartment"
              :data="data" class="w100"
              placeholder="请选择"
              disabled
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="演练人员" prop="telephone" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" @click="openUser" disabled/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
        <el-form-item label="演练目的" prop="telephone">
          <el-input
              v-model="form.teamLeader"
              placeholder="请填写演练目的"
              class="input-with-select textarea"
              type="textarea"
              disabled
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="演练负责人" prop="telephone" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" @click="openUser" disabled/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="保险措施" prop="teamName">
          <el-input v-model="form.teamName" placeholder="请填写演练名称" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="演练经费" prop="teamName">
          <el-input v-model="form.teamName" placeholder="请填写演练名称" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
        <el-form-item label="备注信息" prop="telephone">
          <el-input
              v-model="form.teamLeader"
              placeholder="请填写备注信息"
              class="input-with-select textarea"
              type="textarea"
              disabled
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
        <el-form-item label="预案附件">
          <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-change="handleChange"
              disabled
          >
            <el-button type="primary" disabled
            >点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                添加相关附件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
  <checkTemplate ref="ShowRef"/>
  <userSelections ref="userRef"/>
  <RegionsDialog ref="openRef"/>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue';
import {
  Search
} from '@element-plus/icons-vue'
import type {
  UploadUserFile,
  // FormRules,
} from 'element-plus'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from "/@/components/checkTemplate/index.vue"
import RegionsDialog from "/@/components/regionsDialog/index.vue";
export default defineComponent({
  components: {
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },
    setup() {
        const form = reactive({
            name: '',
      teamName: '',
      responsibleDepartment: '',
      teamLevel: '',
      teamLeader: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
    // 上传附件
    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 datetime = ref('')
    // 计划演练日期
    const drillDate = ref('')
    // 修改时间
    const editDate = ref('')
    // 应急队伍弹窗
    const ShowRef=ref()
    const daiInpt=()=>{
      ShowRef.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开编写人选择用户弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
        return {
            form,
      data,
      treeSelect,
      tree,
      drillDate,
      editDate,
      openUser,
      userRef,
      Search,
      ShowRef,
      daiInpt,
      responsibleDepartment,
      openRef,
      datetime,
      regionsDialog,
      fileList,
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao {
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0;
    position: relative;
}
.typeS {
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor {
    background-color: #67c23a;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns {
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0;
}
.select{
  width: 100%;
}
.select ::v-deep .el-select{
  width: 100%;
}
</style>

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

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

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

 src/views/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue

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

/*弹窗底部边框线*/
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
/*弹窗顶部边框线*/
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

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

@@ -70,7 +70,7 @@
            resource: '',
            desc: '',
        });
        const typeChang=()=>{
    const typeChang=()=>{
         console.log('tag',form)
        }
        const rules = reactive<FormRules>({