13937891274
2022-07-14 5421ae90e2fb0e153037f4a2ca4741de61d04cdd
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>